DOMを再入門して理解を深める 【操作編】

スポンサーリンク

どうも、イソップです。

DOMについての連載第6回目です。

今回はDOMの作成や取得後の操作方法について紹介します。

ノードの作成

ノードを新規に作成する場合、Documentオブジェクトの createElement メソッドを使用します。
また、テキストを設定するには、createTextNode メソッドで、テキストノードを作成して、要素ノードに追加します。
他にも、createComment メソッドでコメントノードも作成できます。

var div = document.createElement('div');
var text = document.createTextNode('foo');
var comment = document.createComment('== div ==');

ノードの追加

作成したノードをHTMLに追加するには、appendChild メソッド、insertBefore メソッドを使用します。

appendChild メソッドは、そのノードの直下末尾に、引数で指定したノードを追加します。
beforeChild メソッドは、そのノードの直下先頭に、引数で指定したノードを追加します。

どちらも、ノードの中に挿入される、という点が重要です。

var div = document.createElement('div');
var text = document.createTextNode('foo');
document.body.appendChild(div);
div.appendChild(text)

var comment = document.createComment('== div ==');
div.insertBefore(comment);

上記の例では、次のような操作をしています。

  1. div要素を作成
  2. テキスト「foo」を作成
  3. body直下にdivを追加
  4. divにテキストを追加
  5. コメントを作成
  6. divの先頭にコメントを追加

ノードを追加すると、すぐにHTMLに反映されます。

ノードの属性、内容を変更

ノードの属性を変更するには、ノードのプロパティの値を書き換えます。

var div = document.createElement('div');

div.id = 'myDiv';
div.className = 'active';
div.style.display = 'inline-block';

idやクラスの指定、スタイルなどの指定が可能です。

innerHTML

createElementappendChild って、なんか回りくどくて面倒ですよね。
そんな時は innerHTML プロパティを使うと、簡潔に内容を書き換えることが出来ます。

innerHTMLプロパティに設定された文字列は解析され、得られるノードをその要素の子要素として設定します。

var myDiv = document.getElementById('myDiv');
myDiv.innerHTML = '<p>Hello World!</p>';

設定する文字列にはタグを含めることが出来ます。これがそのまま子要素になるイメージです。

innerHTML はプロパティなので、内容の取得も可能です。

var content = myDiv.innerHTML;

textContent

textContent プロパティはinnerHTMLとは違い、子要素まで含めてテキスト部分だけを取得・設定することが出来ます。
注意すべきは、文字列を設定すると、子要素は全て削除されて、テキストに置き換わります。

var myDiv = document.getElementById('myDiv');
myDiv.textContent = '<p>Hello World!</p>'; // タグはそのまま文字列で出力される

ノードの置換

ノードを置換するには、replaceChild メソッドを使用します。

var div = document.createElement('div');
var oldDiv = document.getElementsByTagName('div')[0];
var parent = oldDiv.parentNode;

parent.replaceChild(div, oldDiv);

第1引数には新しく置き換えるノードを、第2引数には元のノードを指定します。

ノードの削除

ノードを削除するには、replaceChild メソッドを使用します。

var div = document.getElementsByTagName('div')[0];
div.parentNode.removeChild(div);

次回に続きます。

スポンサーリンク