【DOM連載#3】JavaScriptのDOMでHTML要素を追加・削除

DOMの連載記事、最後の3回目は要素の生成、追加、削除について書く。本題に入る前にノードという概念について簡単に書いておく。

ノードとは

ノードとはHTMLへアクセスするためのインターフェースである。全12種類のノードがあるが、代表的なものは4つ。一つしか存在することが許されず全てのノードを管理するdocumentノード、要素へアクセスするelementノード、文字列へアクセスするtextノード、要素の属性へアクセスするattributeノードである。以下の画像でそれぞれを表してみた。

documentノード以外の3つは生成、追加、削除することが可能である。今日扱うのはelementノードのみ。というのもこれ一つで大体こと足りてしまうので、textノード、attributeノードは特に覚えなくても良いかなと今は思っている。ノードについて詳しくは以下の資料を参照いただきたい。

Document Object Model Core(W3C) <- 英語
Document Object Model Core <- 上記の翻訳版
ドキュメントオブジェクトモデル(DOM)について

という訳でelementノードの生成方法、またその後のHTMLへの追加、削除方法まで書いてみる。前提として、以下のHTMLがあるものとする。

<body>
<h1 id="header">DOM</h1>
<ul id="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>
</body>

要素の生成

1. document.createElement()

指定したタグ名の要素を生成する。

var elemLi = document.createElement('li');  // li要素生成
var elemImg = document.createElement('img');  // img要素生成

2. element.cloneNode()

要素のコピーを生成。引数はtrue/falseでtrueだと子要素までコピー。falseだと子要素はコピーされない。

var elemLi2 = elemLi.cloneNode(true);  // 上記で生成したli要素を複製

要素の追加

3. element.appendChild()

生成した要素を子要素の末尾へ追加する。

document.getElementById('list').appendChild(elemLi);  // listの最後にli追加

4. element.insertBefore()

生成した要素を特定要素の前へ追加する。

document.body.insertBefore(elemImg, document.getElementById('header'));  // headerの上に画像追加

要素の削除

5. element.removeChild()

指定された子ノードを削除。

var e = document.getElementById('list');
e.removeChild(e.children[1]);  //  Twoが消える
document.body.removeChild(e);  //  ul要素が消える

サンプルコード

実際の使われ方をコードで見てもらったほうが早いと思うので、4つほどサンプルコードを書いてみた。

ul要素へli要素を追加する。Textノード（document.createTextNode）で文字列を与えてもよいが、element.textContentの方がコード量が少なく簡単。両者に違いはない。。。と思う。

var e = document.getElementById('list');
var elemLi = document.createElement('li');    //  要素を生成
elemLi.textContent = 'Four';                  //  文字列設定
e.appendChild(elemLi);                        //  要素を追加

サンプル1をコピーしてTwoの上にliを追加。innerHTMLが一番分かりやすい。

var elemLi2 = elemLi.cloneNode(true);         //  要素を生成
elemLi2.innerHTML = "<span style='color:red'>Five</span>";  // HTML設定
e.insertBefore(elemLi2, e.children[1]);       //  要素を追加

h1要素の上にimg要素を追加。attributeノード（element.setAttribute）で属性を与えてもよいが、以下の書き方のほうがコード量が少なく簡単。これまた両者に違いはない。。。と思う。

var h = document.getElementById('header');
var imgElem = document.createElement('img');  //  要素を生成
imgElem.src = 'a001.jpg';                     //  属性設定
imgElem.width = 300;                          //  属性設定
imgElem.height = 100;                         //  属性設定
imgElem.title = 'header picture';             //  属性設定
imgElem.className = 'picture';                //  属性設定
document.body.insertBefore(imgElem, h);       //  要素を追加

サンプル3をコピーして文末にフッター画像を追加。3で与えた属性もしっかりコピーされる。srcとtitle属性だけ上書き。

var imgElem2 = imgElem.cloneNode(true);       //  要素を生成
imgElem.src = 'a002.jpg';                     //  属性設定
imgElem2.title = 'footer picture';            //  属性設定
document.appendChild(imgElem2);               //  要素を追加

HTML要素の生成、追加、削除が出来るようになるとグッとJavaScriptが楽しくなると思う。これだけで色々なアプリが作れそう。というわけで、DOMについて3記事連続で書いてきた。

【DOM連載#1】JavaScriptのDOMでHTML要素を参照
 【DOM連載#2】JavaScriptのDOMでHTML要素を編集

知らなかったメソッドやプロパティなんかが結構あって、とても勉強になった。やっぱりJSは楽しい。

Noise of Web Programming

主にHTML/CSS/JavaScriptやWebサービスの情報を配信しています。可能な限り実装方法まで書いていくつもりです。

【DOM連載#3】JavaScriptのDOMでHTML要素を追加・削除