【ゼロからはじめるプログラミング】JavaScript学習 #27

ゼロからはじめるプログラミング講座の第三十九回です。今回はDOM操作の要素の生成を解説します。動的に要素を作成しましょう。

要素を生成してDOMに追加してみよう。
要素を削除してみよう。
練習問題を解いてみよう。

要素を生成してDOMに追加してみよう。

まずindex.htmlを少し変更します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>JavaScript</title>
</head>
<body>
  <span>JavaScriptを学ぼう。</span>
  <div id="box">
    <button type="button" onclick="alert('ボタンでJavaScriptのコードを実行します。')">アラートボタン</button>
    <button type="button" id="btn1">ボタン1</button>
    <button type="button" id="btn2">ボタン2</button>
    <p id="p1">Pテキスト1</p>
    <p class="ptext">Pテキスト2</p>
    <p>Pテキスト3</p>
    <ul>
      <li>リスト1</li>
      <li>リスト1</li>
    </ul>
  </div>
  <script src="test.js"></script>
</body>
</html>

要素を追加するにはまず要素を作らなくてはいけません。要素を作ったあとにDOMに追加します。ではコードを確認してください。

var element = document.createElement("li")
element.innerText = "test" // 以下の操作でもテキストを追加できる
// var text = document.createTextNode("test")
// element.appendChild(text)
document.querySelector("ul").appendChild(element)

リスト1
リスト2
test

document.createElement(“要素名”)で新たな要素を作ります。

作った要素を親要素.appendChild(渡す要素)でDOMに配置させます。

appendChildは親要素の一番下（後ろ）に要素を追加します。

このままではテキストが無いので<li></li>が入るだけです。innerTextに文字情報を渡してあげましょう。

これで要素が追加できました。

要素を作る、要素の中身などを調整する、DOMに配置する。というのが一連の流れです

要素を一番後ろではなく前に入れる場合は少しややこしいです。

var element = document.createElement("li")
element.innerText = "test1"
var element2 = document.createElement("li")
element2.innerText = "test2"

var li = document.querySelector("li")
var li2 = document.querySelectorAll("li")[1] // 現時点でのlistの2番目の要素

document.querySelector("ul").insertBefore(element,li)
document.querySelector("ul").insertBefore(element2,li2)

test1
リスト1
test2
リスト2

appendChildとinsertBeforeを使うことでどこでも好きな位置に配置することができます。要素の追加は他にもいろいろやり方があるのですがとりあえずこの2つをマスターしてください。

要素を削除してみよう。

削除は簡単です。removeChild()を使います。

var ul = document.querySelector("ul")
var li = document.querySelector("li")
ul.removeChild(li)

リスト2

親要素.removeChild(削除する要素)

単純ですが1つしか削除してくれません。なのでたくさんの要素を削除する場合は少し工夫が必要です。はじめて紹介するwhileループを使います。

var ul = document.querySelector("ul")
var li = document.querySelectorAll("li") // 全てのli
while (ul.firstChild){ // firstChildがなくなると偽になる
  ul.removeChild(ul.firstChild);
}

まずfirstChildには要素の1番目の子要素の情報が入っています。その要素を取得するプロパティが.firstChildです。一番最後の要素の情報lastChildもあります。

次にwhileループ文です。

while(条件式){

// 条件がtrue真の間行う処理

}

という形で書きます。何故今までこのループを紹介してこなかったのかというと無限ループが起こりやすいからです。しっかりと条件と中身の処理を作らないと抜け出せません。

このwhileループじゃないとできない処理はないのですが、記述がシンプルなのでコード量が減ったりコードが読みやすくよったりします。

まだ登場していないループもあるので出たとき紹介しますね。

removeChildで親のfirstChildを削除し続けるループ、つまりは子要素全て削除する処理です。そしてfirstChildがなくなったら条件が偽になるのでループを抜けます。

とても良くできたコードだと思います。

練習問題を解いてみよう。

<ul>に新たな<li>リスト6</li>を追加しなさい。
<li>リスト3<li>、<li>リスト4<li>、<li>リスト5<li>を作りなさい。
- リスト1
- リスト2
- リスト5
- リスト4
- リスト3
- リスト6
となるように作った要素を配置しなさい。

正解するとこうなります。

リスト1
リスト2
リスト5
リスト4
リスト3
リスト6

解答例はこうです（マウスオーバーで表示）

function licreate(string){
  var li = document.createElement("li")
  li.innerText = string // 引数をテキストとして設定します
  return li
}

var ul = document.querySelector("ul")
var li6 = licreate("リスト6")
ul.appendChild(li6)

for(var i=5; i>2; i--){ // 逆ループしています。
  var string = "リスト" + i
  ul.insertBefore(licreate(string),ul.lastChild)
  // ulのlastChildの前に置きます。
}

いろいろな解答があると思いますが再利用可能なパーツをたくさん作る意識は大切です。コードのシンプルさも大切です。他人のコードと比べることはとても良い勉強になるのでまずは自力でコードを完成させましょう。

お疲れ様でした。次回も要素の操作を解説します、ついでにライブラリにも触れます。

次も頑張って記事を作るのでチャレンジしてください！