JavaScript

【課題】JavaScriptでDOMの新規作成・追加・削除をする

どうも、つよぽんです!

今回は演習課題の紹介記事となります。

今回の課題は、前回、前々回記事で学習した以下の知識を定着させることを目的としています。

今回の課題で定着させたい知識
  1. JavaScriptでDOMを新規作成する方法
  2. 新規作成したDOMを別のDOM(要素)に追加する方法
  3. JavaScriptのDOMを使ってWebページ上から表示要素を削除する方法

以下の画像は今回の課題の完成前と完成後を表したものです。(画像クリックで別タブで画像が開きます)

完成前 完成後
今回の課題の完成前の形 今回の課題の完成後の形

今すぐ課題に取り組みたい方は以下の記事から課題ページにアクセスして、早速取り組んでいただけたらと思います。

あわせて読みたい
【エクササイズ】DOMの新規作成・追加・削除・全削除をする【JavaScript】これまで学習してきたJavaScriptでDOMを新規作成・追加・削除・全削除する方法を覚えているでしょうか?今回はそれらの知識の定着度を確かめるための課題を用意しました。この課題に挑戦してDOMの操作方法を知っているレベルから使えるレベルになりましょう。...

この記事の想定読者は次のとおりです。

想定読者
  • APIなどで取得したデータを使って新しくDOMを新規作成したい
  • 新規作成したDOMを使って、Webページ上に表示要素を追加したい
  • Webページ上の表示要素を削除したい(「削除ボタン」を押したら特定の要素を消すなど)

課題に取り組む際にはもちろんHTMLファイルとJavaScriptファイルを連携させる方法を知っている必要があります。

もし、HTMLファイルとJavaScriptファイルの連携方法を忘れてしまっている場合は、以下の記事を参考にしましょう。

あわせて読みたい
HTMLでJavaScriptの外部ファイルを読み込み、実行するHTMLでJavaScriptファイルを読み込むことでWebブラウザでJavaScriptを実行することができます。今回はJavaScriptファイルの作成方法から、HTMLで作成したJavaScriptを読み込み、実行するところまでを解説します。...

今回の課題をクリアするために参考になる記事は次のとおりです。忘れてしまっているものがあれば記事を読み返しふり返ってみましょう。

【JavaScript】DOMの新規作成・別要素に追加する方法

今回の課題では大きく分けて次の3つのことをやっていただきます。

今回の課題で行う3つのこと
  1. DOMの新規作成
  2. DOMを別のDOMに追加
  3. DOMの削除

上記3つの内、「①DOMの新規作成」「②DOMを別のDOMに追加する」に関しては、以下の記事で解説しました。

具体的には、①DOMの新規作成には「createElement」、②DOMを別のDOMに追加するには「appendChild」というメソッドを使います。

「createElement」「appendChild」の使い方は以下の記事で詳しく説明しているのでそちらを参考にしていただけたらと思います。

あわせて読みたい
【JavaScript】DOMの新規作成・別要素に追加する方法JavaScriptでDOMを新規作成する方法と、DOMを別のDOMに追加する方法を解説します。①DOMの新規作成にはcreateElement, ②DOMの追加にはappendChildを使います。それぞれの使い方をこの記事で説明していきます。...

【JavaScript】removeChildでDOMを削除する

繰り返しになりますが、今回の課題では次の3つのことを行います。

今回の課題で行う3つのこと
  1. DOMの新規作成
  2. DOMを別のDOMに追加
  3. DOMの削除

前の章では①、②の説明をしました。

残りの「③DOMの削除」を実現するには以下の記事で紹介している「removeChild」メソッドを使います。

DOMを削除するには、削除したいDOM情報だけでなく、そのDOMの親要素も知っておく必要があります。

親のDOMを知る方法として「parentNode」プロパティについても以下の記事で説明しました。

また、ある要素に含まれる全ての子要素を削除する方法についても以下の記事で解説しました。

子要素の全削除を実現する方法はDOMの「firstChild」プロパティと「while」ループを組み合わせることで可能となります。

「特定の要素1件を削除する方法」「特定の要素に含まれる全ての子要素を削除する方法」を忘れてしまった場合は以下の記事を参考にしていただけたらと思います。

あわせて読みたい
【JavaScript】removeChildでDOMを削除するJavaScriptのDOMを使って要素をWebページ上から削除する方法を知っていますか?要素を削除するにはDOMのremoveChildメソッドを利用します。今回はremoveChildで、①特定の要素を1つ削除する方法、②特定の要素内の子要素を全て削除する方法を解説していきます。...

まとめ

あらためて、今回の課題をクリアするために必要な知識を解説した記事を以下にまとめておきます。

上にまとめた記事内容をふりかえり、今回の演習課題で取り組む知識の定着のためにも、ぜひチャレンジしましょう!^^

今回の課題で定着させたい知識
  1. JavaScriptでDOMを新規作成する方法
  2. 新規作成したDOMを別のDOM(要素)に追加する方法
  3. JavaScriptのDOMを使ってWebページ上から表示要素を削除する方法
あわせて読みたい
【エクササイズ】DOMの新規作成・追加・削除・全削除をする【JavaScript】これまで学習してきたJavaScriptでDOMを新規作成・追加・削除・全削除する方法を覚えているでしょうか?今回はそれらの知識の定着度を確かめるための課題を用意しました。この課題に挑戦してDOMの操作方法を知っているレベルから使えるレベルになりましょう。...

頭では理解してても実際に手を動かしてみて手が進まないところがあれば、それは理解が不十分だということを意味します。

練習問題をやっててわからないところ、質問したいところがあればお気軽に以下からご連絡いただけたらと思います^^

あわせて読みたい
【絶賛受付中】プログラミング・Webの相談お気軽にどうぞ!
【絶賛受付中】プログラミング・Webの相談お気軽にどうぞ!プログラミングやWebで困っていることに対して何でも質問受け付けています。「こんなこと質問しても大丈夫かな」と思っている方のために過去にどんな質問があったのか一例で挙げているので参考にしていただけたらと思います。...

それでは、課題頑張ってください!

【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

LINE登録で無料特典を受け取る

次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。

  • Webエンジニアになりたいけど何から学習を始めれば良いかわからない
  • 今まで独学で頑張ってきたけど、独学に限界を感じてきた
  • プログラミングは出来るけど、大きめのコードが書けない

「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。

無料特典を受け取る

 

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です