【学習ログ】JavaScriptのDOM操作！要素の追加のやり方

2020年10月11日

こんにちはつるぴよ（@tsurupiyoo）です。

現在もりけん塾（）でJavaScriptの勉強中です。

今回はJavaScriptのDOM操作についてあらためてまとめていこうと思います！

＼この記事はこんな方のお役にたてます／
JavaScriptの基本は一通り学んだけど実戦でどう使うのか知りたい。
DOM操作ってどういうことなのか理解したい。
要素の追加をするための基本的なコードの書き方が知りたい。

DOM操作ってなんのためにするの？？

つるぴよ

「DOM」はDocument Object Modelの略だよ！

「DOM」操作とは、JavaScriptからHTMLにアクセスするための窓口のようなものです。
これを使ってJavaScriptの方からHTMLの要素の値を取得したり変更することです。

「HTML」「CSS」「JavaScript」の役割はそれぞれ異なっています。

人間の体に例えると‥
HTML→骨組み
CSS→筋肉や皮膚、見た目
JavaScript→手をどうやって動かすのか？足をどうやって動かすのか？

JavaScriptはWebページにアクセスしたユーザーが望む操作を行わなくてはいけません。
このようにJavaScriptはユーザーから見たWebページの動きの部分を作ります。

＊例えば＊
・入力したデータを取得する

・新しいデータを表示する

・データを送信する　etc‥

JavaScriptのDOM操作のやり方をみていこう！

例えばHTMLでこんなコードを書くとします。

<ul>
 <li><a href="dog.html"><img src="img/dog.jpeg" alt="画像１">dog</li> 
 <li><a href="pengin.html"><img src="img/pengin.jpeg" alt="画像２">pengin</li>
</ul>

ブラウザ表示するとこうなります

これをHTMLを使わず、JavaScriptのDOM操作だけで要素を追加して作成します！

querySelectorで要素を取得しよう

さっき書いた「HTML」の内容は一旦消して、下記のように

<ul><ui>

「ul」だけにします。

これから色々コードを書くのは<script>タグの中です。
まずは「querySelector」を使ってJavaScriptからHTMLの「ul」要素を取得しましょう！
取得したものを変数「ul」に詰め込みます。

 let ul = document.querySelector("ul");

＊querySelector()とは？＊
JavaScriptから任意のHTML要素を検出・取得が出来るメソッド。
属性を気にせずjQuery感覚でHTML要素を指定できる。
「getElementById ()」や「getElementByClassName()」などのメソッドは取得できる要素が限ら
れる。（idやclassなど)

配列データにまとめてforEachメソッドでループ処理をしよう

次に「href」・「テキスト」・「img」を配列データにまとめます。

[ {href : "dog" , text : "dog" , src : "img/d.jpeg", alt: "画像１"} ,
 {href: "pengin" , text : "pengin" , src : "img/p.jpeg", alt: "画像２"}]

この配列を「forEach」メソッドを使って扱っていきます。

＊forEachメソッドとは？
配列に格納されたデータをループ処理（繰り返し処理）を行い一気に使いたい時に利用します。
構文は以下の通りです。配列.forEach( コールバック関数による処理 )

実際に書いてみると以下の通りです。

forEach((e) => {
//createElementを使って要素を作ります
  let li = document.createElement("li");
  let a = document.createElement("a");
  let img = document.createElement("img");

//作り出した要素に配列のデータを詰め込みます      
  li.textContent = e.text;
  a.href = e.href;
  img.src = e.src;
　img.alt = e.alt;

//最初に指定した(ul)要素にappendChildを使って作った要素を追加していきます
  ul.appendChild(li).appendChild(a).appendChild(img);
});

上記を部分ごとに解説していきます。

createElement()で要素を作る

let li = document.createElement("li"); 
let a = document.createElement("a");
let img = document.createElement("img");

この部分で各要素を作り出しています。
変数宣言をしてその中に作り出した要素を詰め込んでいます。

こうして「li」「a」「img」要素をJavaScriptで作ります。

作り出した要素に配列のデータを入れる

li.textContent = e.text;
a.href = e.href;
img.src = e.src; 　
img.alt = e.alt;

console.log()を使って「e.text」の中身を確認してみると
配列の中で「text」で指定した「dog」「pengin」が入っているのがわかります。
なので先ほど作成した変数「li」の「textContent」の中に配列データの「e.text」を入れます。
その他の要素にも同じように作っていきます。

appendChildを使って要素を追加しよう

ul.appendChild(li).appendChild(a).appendChild(img);

「appendChild」は特定の親要素の中に要素を追加するメソッドです。
要素を指定すると、その要素を子要素としてHTMLタグを追加することができます。

指定した親要素の末尾に子要素が追加されます。

今回の例では、最初に「querySelector」で取得した「ul」要素を親要素として「ul.appendChild」として「li」「a」「img」を追加しています。

こうして最初にHTMLで作成したものをJavaScriptで作り出すことができます。

JavaScriptのDOM操作　まとめ

つるぴよ

ここまでの内容をまとめます！

①「querySelector」でHTML要素を取得する
②データを配列にまとめる
③「forEach」でループ処理をする
④「createElement」で要素を作り出す
⑤作り出した要素に配列内の当てはまるデータを詰め込む
⑥最初に取得した要素を親要素として作り出した要素を「appendChild」で追加していく

JavaScriptのDOM操作は基本中の基本なのでしっかり押さえて置いた方が良いです！
今回は学習したことを忘備録としてまとめました。

＊JavaScript講師「森田賢二」さん
ブログ「武骨日記」はこちらから
Twitterフォローはこちらから