連載
» 2008年08月04日 00時00分 公開

DOMの基本を学ぼう(7):JavaScriptでHTMLをダイナミックに書き換える 後編 (1/3)

タグ要素を追加するテクニックに続き、要素の削除、置き換え、複製などの取り扱いを解説します。

[羽田野太巳,@IT]

旧来の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が切り替わります。

       1|2|3 次のページへ

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。