読者です 読者をやめる 読者になる 読者になる

Noise of Web Programming

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

ブログを移転しました。

Tecuration.com

このサイト同様、HTML/CSS/JavaScriptなどのフロントサイドWeb開発に関する最新情報やライフハックを配信しています。

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

Javascript

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つほどサンプルコードを書いてみた。

  1. ul要素へli要素を追加する。Textノード(document.createTextNode)で文字列を与えてもよいが、element.textContentの方がコード量が少なく簡単。両者に違いはない。。。と思う。
  2. var e = document.getElementById('list');
    var elemLi = document.createElement('li');    //  要素を生成
    elemLi.textContent = 'Four';                  //  文字列設定
    e.appendChild(elemLi);                        //  要素を追加
    


  3. サンプル1をコピーしてTwoの上にliを追加。innerHTMLが一番分かりやすい。
  4. var elemLi2 = elemLi.cloneNode(true);         //  要素を生成
    elemLi2.innerHTML = "<span style='color:red'>Five</span>";  // HTML設定
    e.insertBefore(elemLi2, e.children[1]);       //  要素を追加
    


  5. h1要素の上にimg要素を追加。attributeノード(element.setAttribute)で属性を与えてもよいが、以下の書き方のほうがコード量が少なく簡単。これまた両者に違いはない。。。と思う。
  6. 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);       //  要素を追加
    


  7. サンプル3をコピーして文末にフッター画像を追加。3で与えた属性もしっかりコピーされる。srcとtitle属性だけ上書き。
  8. 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は楽しい。

広告を非表示にする