JavaScriptでHTMLをダイナミックに書き換える 後編：DOMの基本を学ぼう（7）（1/3 ページ）
タグ要素を追加するテクニックに続き、要素の削除、置き換え、複製などの取り扱いを解説します。
旧来のDHTMLの手法では、JavaScriptから操作できるHTML要素に限りがありましたが、DOMでは、HTML上のありとあらゆる要素を自由自在に読み取ったり、書き換えることができるようになります。本連載では、主にDOM Level 1で規定されている手法を使い、JavaScriptでどのようにHTML上の要素へアクセスするのか、そして、それをどうやって書き換えるのかを詳しく解説します。これにより、JavaScriptからHTML要素を手に取るように操れるようになります。
前回の「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が切り替わります。
Copyright © ITmedia, Inc. All Rights Reserved.