【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の方がコード量が少なく簡単。両者に違いはない。。。と思う。
- サンプル1をコピーしてTwoの上にliを追加。innerHTMLが一番分かりやすい。
- h1要素の上にimg要素を追加。attributeノード(element.setAttribute)で属性を与えてもよいが、以下の書き方のほうがコード量が少なく簡単。これまた両者に違いはない。。。と思う。
- サンプル3をコピーして文末にフッター画像を追加。3で与えた属性もしっかりコピーされる。srcとtitle属性だけ上書き。
var e = document.getElementById('list'); var elemLi = document.createElement('li'); // 要素を生成 elemLi.textContent = 'Four'; // 文字列設定 e.appendChild(elemLi); // 要素を追加
var elemLi2 = elemLi.cloneNode(true); // 要素を生成 elemLi2.innerHTML = "<span style='color:red'>Five</span>"; // HTML設定 e.insertBefore(elemLi2, e.children[1]); // 要素を追加
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); // 要素を追加
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は楽しい。