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

もともとは存在しなかったタグ要素を新たに追加したり、変更、削除するテクニックを学ぶ。こうした処理ができるのはDOMならではの魅力だ。

» 2008年07月02日 00時00分公開

旧来のDHTMLの手法では、JavaScriptから操作できるHTML要素には限りがありましたが、DOMでは、HTML上のありとあらゆる要素を自由自在に読み取ったり、書き換えることができるようになります。本連載では、主にDOM Level 1で規定されている手法を使い、JavaScriptでどのようにHTML上の要素へアクセスするのか、そして、それをどうやって書き換えるのかを詳しく解説します。これにより、JavaScriptからHTML要素を手に取るように操れるようになります。

　DOMスクリプティングでは、HTMLをJavaScriptから自由自在に書き換えられる点が大きな魅力です。これまで、HTMLに存在する要素の参照方法や属性の扱い方を学んできましたが、ここでは、もともと存在しなかったタグ要素を新たに追加したり、変更、削除するテクニックを学んでいきます。

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

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

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

【注文ページへ】

テキストを追加する（createTextNode）

　JavaScriptを使ってダイナミックにHTMLを変化させたい場合、要素の追加という処理はDOMならではの強みといえるでしょう。もともと存在していなかったタグを、条件やイベントに応じて、自由に追加できるのです。既存のタグの属性やスタイルを変化させるだけの旧来の手法と比べ、非常にパワフルです。サンプルを見ながら、好きな要素を好きな場所に追加する手法を学んでいきましょう。

<body>
　 <p id="info"></p>
</body>

　この簡単なHTMLをごらんください。Pタグにはid属性値として"info"がセットされていますが、中身はありません。このHTMLだけであれば、ブラウザ上にはなにも表示されません。

　まずはここに「こんにちは」という文字を新たに挿入しましょう。</body>の直前に、次のJavaScriptコードを挿入します。

createTextNode.html
<script type="text/javascript">
　 /*（1）Pタグの要素ノードオブジェクト*/
　 var info = document.getElementById('info');
　 /*（2）新たにテキストノードを作成する*/
　 var textNode = document.createTextNode('こんにちは');
　 /*（3）作成したテキストノードをPタグ要素の子要素として追加する*/
　 info.appendChild(textNode);
</script>

　このサンプルをブラウザで表示すると、Pタグの中に"こんにちは"という文字が挿入された状態となります。

　ここでいちばん重要なメソッドは、createTextNodeメソッドとappendChildメソッドです。テキストを挿入する手順は非常に簡単です。まず、createTextNodeメソッドを使ってテキストノードを作成します。次に、作成したテキストノードを、指定した場所にappendChlidメソッドを使って追加するだけです。

　（1）では、テキストを挿入したいPタグの要素ノードオブジェクトを、変数infoに格納します。

　（2）では、createTextNodeメソッドに、挿入したい文字を引数に与え、新たに作成されたテキストノードオブジェクトを変数textNodeに格納します。createTextNodeメソッドはdocumentオブジェクトに定義されているメソッドですので、必ずdocument.createTextNode('文字列')といった具合に使ってください。createTextNodeメソッドでテキストノードを新たに作成しても、すぐにはブラウザ上に反映されません。まだ仮想的に作られたにすぎず、HTML上のどの要素にも関連付けられていないのです。この宙に浮いているテキストノードを、appendChildメソッドで関連付けるわけです。

　（3）では、appendChildメソッドに、先ほど作成したテキストノードオブジェクトを引数として与えて、ブラウザ上に表示させています。apendChildメソッドは、要素ノードオブジェクトに定義されたメソッドです。そのため、テキストを挿入したい要素ノードオブジェクトに対してappendChildメソッドを実行することで、その場所にテキストノードが追加されるのです。ここでは、Pタグの要素ノードオブジェクトinfoに対してappendChildメソッドを呼び出していますので、<p id="info">こんにちは</p>という状態ができあがったのです。

タグを追加する（createElement）

　先ほどはテキストを新たに追加する方法を学びましたが、今度はタグを新たに追加する方法を見ていきましょう。

<body>
　 <p id="info"></p>
</body>

　このHTMLは先ほどのサンプルとまったく同じですが、このPタグの中に"<h1>こんにちは</h1>"というタグを挿入してみましょう。

　</body>タグの直前に、次のJavaScriptコードを追加します。

createElement.html
<script type="text/javascript">
　 /*（1）Pタグの要素ノードオブジェクト*/
　 var info = document.getElementById('info');
　 /*（2）新たにH1タグの要素ノードを作成する*/
　 var h1Node = document.createElement('h1');
　 /*（3）新たにテキストノードを作成する*/
　 var textNode = document.createTextNode('こんにちは');
　 /*（4）作成したテキストノードをH1タグ要素の子要素として追加する*/
　 h1Node.appendChild(textNode);
　 /*（1）Pタグに、完成したH1タグを追加する*/
　 info.appendChild(h1Node);
</script>

　このサンプルは、前回のテキスト追加の手法と、新たに学ぶタグの追加の手法を組み合わせたものです。タグの追加手順はテキスト追加手順と非常に似ています。

　まず、createElementメソッドを使ってH1タグを作ります。最後にappendChildを使ってH1タグを所定の場所に差し込みます。ただ今回は、H1タグの中にテキストを入れなければいけませんので、その処理を追加しています。では具体的に見ていきましょう。

　（1）では、Pタグの要素ノードオブジェクトを変数infoに格納します。

　（2）では、createElementメソッドを使ってH1タグを新たに生成します。createElementメソッドはdocumentオブジェクトに定義されたメソッドですので、document.createElement(タグ名)といった具合に使います。引数にはタグ名をそのまま与えます。ここでは'h1'となります。createElementメソッドは、作成した要素ノードオブジェクトを返しますので、それを変数h1Nodeに格納しておきます。

　（3）では別途、テキストノードを作成します。当然この段階ではテキストノードもH1タグの要素ノードも画面上には現れず、宙に浮いたままの状態です。

　（4）では、appendChildメソッドを使って、H1タグ要素の中にテキストノードを組み込みます。この段階で、"<h1>こんにちは</h1>"という部品が完成したことになります。しかし、これでもまだ画面上には現れません。宙に浮いた状態のままです。

　（1）で、Pタグの要素ノードオブジェクトinfoに対してappendChildメソッドを使って、先ほど作成した"<h1>こんにちは</h1>"を構成する要素ノードオブジェクトのh1Nodeを追加します。これで画面上にH1タグで囲まれた"こんにちは"という文字がブラウザ内でレンダリングされ、表示されます。

ある要素の直前に追加する（insertBefore）

　　　　　　 1|2 次のページへ

SpecialPR