JavaScriptでHTMLをダイナミックに書き換える　後編：DOMの基本を学ぼう（7）（1/3 ページ）

　前回の「JavaScriptでHTMLをダイナミックに書き換える　前編」では、タグ要素を追加するテクニックを解説しました。今回はその続きで、要素の削除、複製などの取り扱いを解説します。

本連載は、ソフトバンククリエイティブ刊行の『標準DOMスクリプティング』のうち「第2章 DOMの基本」を、同社の許可を得て転載するものです。

本書は、DOM（Document Object Model）とJavaScriptの関係を分かりやすく解説しています。さらに、JavaScriptからDOMを介して、いかにしてHTMLやXMLの操作ができるのかを紹介しています。またこれらのことを学びながら、クロスブラウザ対策の重要性も理解できるようになると思います。

なお、 Webでの連載として転載するに当たり、若干表現を変更している点があります（例えば「本書は」としている部分は「本連載は」としていることや図版などの省略など）。その点ご了承ください。

【注文ページへ】

要素を削除する（removeChild）

　すでにHTML内に存在している要素を削除する場合には、removeChildメソッドを使います。メソッド名を見ておわかりかと思いますが、子要素を削除するメソッドですので、先ほどのinsertBeforeメソッドと同様に削除対象の要素の親要素が必要になります。

　removeChildメソッドには、削除したい要素のノードオブジェクトを引数に与えます。

removeChild.html
<div id="toc">
　 <div id="chapter1">DOM</div>
　 <div id="chapter2">CSS</div>
　 <div id="chapter3">HTML</div>
</div>
<script type="text/javascript">
　 /*（1）chapter2のDIVタグの要素ノードオブジェクト*/
　 var targetNode = document.getElementById('chapter2');
　 /*（2）chapter2のDIVタグ要素を削除*/
　 targetNode.parentNode.removeChild(targetNode);
</script>

　要素の削除は、それを参照するノードオブジェクトさえ用意できれば、とても簡単に処理できます。

　（1）では、id属性値に"chapter2"がセットされたDIVタグの要素ノードオブジェクトを変数targetNodeに格納します。

　（2）で、removeChildメソッドの引数にtargetNodeを与えます。親要素はtargetNode.parentNodeで代用していますが、document.getElementById('toc')でも同様の結果が得られます。

　removeChildメソッドは、引数に与えた要素ノードオブジェクトを丸ごと削除します。末端のノードから順に削除する必要はありません。例えば、サンプルのHTMLすべてを削除したい場合は、（1）を次のように書き換えるだけで実現できます。

　var targetNode = document.getElementById('toc');

要素を置き換える（replaceChild）

　ある特定の要素をまったく別の要素に置き換えるには、replaceChildメソッドを使います。replaceChildメソッドは子要素を置き換えるメソッドですので、対象となる要素の親要素のノードオブジェクトが必要です。

　replaceChildメソッドは2つの引数を与えます。1つ目には新たに置き換える要素ノードオブジェクトで、2つ目には対象となる要素ノードオブジェクトです。

　サンプルで使い方を見ていきましょう。

replaceChild.html
<div id="toc">
<div id="chapter1">DOM</div>
<div id="chapter2">CSS</div>
<div id="chapter3">HTML</div>
</div>
<script type="text/javascript">
/*（1）chapter3のDIVタグ要素のノードオブジェクト*/
var targetNode = document.getElementById('chapter3');
/*（2）新たなDIVタグを作成*/
var newNode = document.createElement('div');
var textNode = document.createTextNode('付録A');
newNode.appendChild(textNode);
newNode.id = 'appendixa';
/*（3）chapter3のDIVタグを置き換える*/
targetNode.parentNode.replaceChild(newNode, targetNode);
</script>

　このサンプルでは、

　<div id="chapter3">HTML</div>

を、

　<div id="appendixa">付録A</div>

にそっくり置き換えます。

　（1）では、置き換えの対象となるDIVタグの要素ノードオブジェクトを、targetNodeに格納します。

　（2）では、新たに置き換える要素ノードオブジェクトを生成し、newNodeに格納します。

　（3）で、targetNodeをnewNodeにそっくり置き換えます。この段階で、HTMLが切り替わります。