(1/3)タグ要素を追加するテクニックに続き、要素の削除、置き換え、複製などの取り扱いを解説します。});旧来のDHTMLの手法では、JavaScriptから操作できるHTML要素に限りがありましたが、DOMでは、HTML上のありとあらゆる要素を自由自在に読み取ったり、書き換えることができるようになります。1で規定されている手法を使い、JavaScriptでどのようにHTML上の要素へアクセスするのか、そして、それをどうやって書き換えるのかを詳しく解説します。これにより、JavaScriptからHTML要素を手に取るように操れるようになります。前編」では、タグ要素を追加するテクニックを解説しました。今回はその続きで、要素の削除、複製などの取り扱いを解説します。DOMの基本」を、同社の許可を得て転載するものです。Model)とJavaScriptの関係を分かりやすく解説しています。JavaScriptからDOMを介して、いかにしてHTMLやXMLの操作ができるのかを紹介しています。これらのことを学びながら、クロスブラウザ対策の重要性も理解できるようになると思います。Webでの連載として転載するに当たり、若干表現を変更している点があります(例えば「本書は」としている部分は「本連載は」としていることや図版などの省略など)。その点ご了承ください。要素を削除する(removeChild)すでにHTML内に存在している要素を削除する場合には、removeChildメソッドを使います。メソッド名を見ておわかりかと思いますが、子要素を削除するメソッドですので、先ほどのinsertBeforeメソッドと同様に削除対象の要素の親要素が必要になります。removeChildメソッドには、削除したい要素のノードオブジェクトを引数に与えます。targetNode.parentNode.removeChild(targetNode);</script>要素の削除は、それを参照するノードオブジェクトさえ用意できれば、とても簡単に処理できます。(1)では、id属性値に"chapter2"がセットされたDIVタグの要素ノードオブジェクトを変数targetNodeに格納します。(2)で、removeChildメソッドの引数にtargetNodeを与えます。親要素はtargetNode.parentNodeで代用していますが、document.getElementById('toc')でも同様の結果が得られます。removeChildメソッドは、引数に与えた要素ノードオブジェクトを丸ごと削除します。末端のノードから順に削除する必要はありません。サンプルのHTMLすべてを削除したい場合は、(1)を次のように書き換えるだけで実現できます。document.getElementById('toc');要素を置き換える(replaceChild)ある特定の要素をまったく別の要素に置き換えるには、replaceChildメソッドを使います。replaceChildメソッドは子要素を置き換えるメソッドですので、対象となる要素の親要素のノードオブジェクトが必要です。replaceChildメソッドは2つの引数を与えます。1つ目には新たに置き換える要素ノードオブジェクトで、2つ目には対象となる要素ノードオブジェクトです。サンプルで使い方を見ていきましょう。id="appendixa">付録A</div>にそっくり置き換えます。(1)では、置き換えの対象となるDIVタグの要素ノードオブジェクトを、targetNodeに格納します。(2)では、新たに置き換える要素ノードオブジェクトを生成し、newNodeに格納します。(3)で、targetNodeをnewNodeにそっくり置き換えます。この段階で、HTMLが切り替わります。メールマガジンをご購読ください。申し込みページへITmediaはアイティメディア株式会社の登録商標です。