HTMLタグ名や属性値からの参照をマスターしよう：DOMの基本を学ぼう（2）（2/3 ページ）
要素ノードオブジェクトの使い方
今度は、取り出した要素ノードオブジェクトから、プロパティやメソッドを使って、タグ内のテキストを取り出してみましょう。次のJavaScriptコードを</body>タグの直前に記述します。
<script type="text/javascript">
/* （1）H1タグ要素オブジェクトを取り出す*/
var h1Elm = document.getElementsByTagName('h1')[0];
/* （2）H1タグ要素内のテキストノードを取り出す*/
var textNode = h1Elm.childNodes[0];
/* （3）テキストノードのテキストを取り出す*/
var text = textNode.nodeValue;
/* （4）テキストをポップアップ表示*/
alert(text);
</script>
ブラウザでHTMLを表示させると、H1タグ内の"DOMのレベル"というテキストが抜き出され、アラートウィンドウに表示されます。
このスクリプトでは（1）で、H1タグ要素のNodeListの0番目をh1Elmに格納します。（2）では、H1タグ要素のテキストノードオブジェクトを取り出し、変数textNodeに格納します。タグ内にテキストを含む場合、DOMドキュメントツリーでは、さらに下にもう1つのノードが構成されるのは前述の通りです。したがって、childNodesプロパティを使って、H1タグ要素の直下にある子要素を取り出します。childNodesプロパティは、直下にある子要素をNodeList型のオブジェクトで返します。今回、H1タグには、当然のことながら子要素は1つしかありませんので、0番目、つまり最初の要素を抜き出せばよいことになります。
（3）では、テキストノードオブジェクトからテキストそのものを抜き出します。テキストノードからテキストを抜き出すには、nodeValueプロパティを使います。
このスクリプトは、説明しやすいようプロセスを分割して記述しましたが、まとめて記述すると次のようになります。
alert(document.getElementsByTagName('h1')[0].childNodes[0].nodeValue);
プロセスごとに行を分割して記述するのか、それとも、このように1行にまとめて記述するのかは、あなたの好み次第です。しかし行を分割しすぎたり、逆に、多くのプロセスを1行にまとめすぎてしまうと、コードがわかりにくくなるので、いずれの場合も注意しましょう。
最後に、このJavaScriptコードを</body>タグの直前に記述したのには理由があります。ブラウザは、HTMLの内容を上から順に見ていきます。もしこのJavaScriptコードをHEADタグ内に記述するとエラーになってしまいます。理由はおわかりですね。JavaScriptコードをHEADタグ内に記述すると、このJavaScriptコードをブラウザが読み込んだ時点では、H1タグは存在していません。それにもかかわらず、JavaScriptにはH1タグ要素への参照を取り出すコードが書かれているのですから、当然エラーになるわけです。そのためJavaScriptコードは、一通りのコンテンツ、ここではBODYタグ内の内容をすべてブラウザが読み込んだ時点でJavaScriptが実行されるよう、</body>タグの直前に記述したわけです。JavaScriptのロードタイミングとHTMLコンテンツのロードタイミングを、十分に考慮してください。
ところで、JavaScriptコードをHTMLコンテンツ内に記述するのはよくないと思われる方も多いことでしょう。しかし、もう少し辛抱してください。ここでは説明のためにあえてHTMLコンテンツ内にJavaScriptコードを記述しているにすぎません。のちほど、HTMLコンテンツとJavaScriptコードの完全分離の方法を解説していきます。
id属性値から要素を参照する
先ほどはタグ名から要素を参照する方法を学びましたが、これだけでは実践的ではありません。実践においては、これまでの例のような簡単なHTMLを使うシーンはほとんどないでしょう。実際にはもっと複雑なHTMLとなり、DOMツリーの階層が何重にも重なる点に加え、同じタグ名が多数並ぶことも想定されます。このようなHTMLからタグ名だけを頼りに特定の要素を抜き出すというのは至難の業です。そこで役に立つのがid属性です。
HTMLの仕様では、id属性値は必ずユニーク（一意的）でなければいけません。HTMLに文法ミスがない限り、id属性値を指定すれば、必ず1つだけのタグをピンポイントで指定できるはずです。DOMでは、id属性値からピンポイントで指定の要素を抜き出すインタフェースを提供しています。次のHTMLをごらんください。
<h2 id="subtitle1">DOMのメソッド</h2> <ul> <li id="item1_1">getElementsByTagName</li> <li id="item1_2">getElementById</li> </ul> <h2 id="subtitle2">DOMのプロパティ</h2> <ul> <li id="item2_1">childNodes</li> <li id="item2_2">nodeValue</li> </ul>
このHTMLでは、H2タグが2つ、LIタグが4つあります。各タグにはid属性値がセットされています。id属性値から要素を参照するには、getElementByIdメソッドを使います。"Elements"でないことに注意してください。
前述のgetElementsByTagNameメソッドは、指定されたタグ名すべてを取り出しますので、複数の要素が対象となります。抜き出した要素オブジェクトが1つしかなかったとしても、NodeList型のオブジェクトとして返します。
それに対してgetElementByIdメソッドでは、必ず1つの要素オブジェクトしか取り出せません。そのため、メソッドの名前も単数形になっているのです。
では、id属性値が"subtitle2"となっているH2タグ要素の要素オブジェクトを抜き出してみましょう。
<script type="text/javascript">
/* （1）id属性値がsubtitle2となっている要素を取り出す*/
var subtitle2 = document.getElementById('subtitle2');
/* （2）テキストをポップアップ表示*/
alert(subtitle2.childNodes[0].nodeValue);
</script>
このJavaScriptコードを
