どうも、イソップです。
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);
上記の例では、次のような操作をしています。
- div要素を作成
- テキスト「foo」を作成
- body直下にdivを追加
- divにテキストを追加
- コメントを作成
- divの先頭にコメントを追加
ノードを追加すると、すぐにHTMLに反映されます。
ノードの属性、内容を変更
ノードの属性を変更するには、ノードのプロパティの値を書き換えます。
var div = document.createElement('div');
div.id = 'myDiv';
div.className = 'active';
div.style.display = 'inline-block';
idやクラスの指定、スタイルなどの指定が可能です。
innerHTML
createElement や appendChild って、なんか回りくどくて面倒ですよね。
そんな時は 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);
次回に続きます。
