ノード参照時におけるエラーハンドリング手法を学ぼう：DOMの基本を学ぼう（3）（1/2 ページ）

HTML文書から特定のタグ要素を参照する方法と、ノード参照の際のエラー時、その場で処理が終了しないためにすべきこととは何か。

[羽田野太巳，＠IT]

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

　前回「HTMLタグ名や属性値からの参照をマスターしよう」では、HTML文書から特定のタグ要素を参照する2つの方法を学びましたが、DOMにはまだほかにも要素を参照するインターフェイスが規定されています。そしてもう1つ重要なことは、HTMLにはタグ要素が存在しない場合もあるということです。JavaScriptエラーとなり、その場で処理が終了しないためにすべきこととは何でしょうか。

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

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

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

【注文ページへ】

HTML文書から特定のタグ要素を参照する方法

　HTML文書から特定のタグ要素を参照する2つの方法を学んできましたが、DOMには、まだ他にも要素を参照するインタフェースが規定されています。それは、ある特定の要素からの相対位置で参照するインタフェースです。相対位置とは、基準となる要素から見て、親要素なのか子要素なのか、もしくは同列の要素なのかを意味します。具体例を見ていきましょう。

family_tree.html
<div id="parent">
　<div id="taro">太郎</div>
　<div id="jiro">次郎</div>
　<div id="saburo">三郎</div>
</div>

　このHTMLでは、3兄弟の名前をDIVタグで並べ、それをさらにDIVタグで囲んでいます。このサンプルを使って、相対位置による要素参照の手法を見ていきます。以下、Internet Explorerを使って試してください。

子要素を参照する(childNodes/firstChild/lastChildプロパティ)

　まず、id属性値に"parent"がセットされているDIVタグ要素のオブジェクトは、次のように参照することができます。

var parent = document.getElementById('parent');

　このparentから、長男である"太郎"を含んだDIVタグ要素を参照すると、次のようになります。

var taro = parent.childNodes[0];

　同様に"次郎"、"三郎"を含んだDIVタグは、次のように参照します。

var jiro = parent.childNodes[1];
var saburo = parent.childNodes[2];

　childNodesは前のサンプルでも紹介していますので、ご理解いただけるでしょう。DOMでは、子要素を参照するプロパティとして、firstChild、lastChildプロパティを規定しています。firstChildは子要素の最初の要素を参照し、lastChildは最後の要素を参照します。

　この例では、parent.childNodes[0]とparent.firstChildは同じ要素を参照します。また、parent.childNodes[2]とparent.lastChildは同じ要素を参照します。

親要素を参照する(parentNodeプロパティ)

　では、jiroから、親要素となるDIVタグ（id属性値が"parent"）を参照してみましょう。

var parent = jiro.parentNode;

　parentNodeプロパティは、基準となる要素から見て直近の親となる要素を参照します。したがってこのサンプルでは、taroから見てもsaburoから見ても、同じ要素を参照することになります。つまり、taro.parentNode もsaburo.parentNode も同じ要素オブジェクトを返すことになります。

兄弟要素を参照する（previousSibling/nextSiblingプロパティ）

　以上で親と子を参照する方法を学びましたが、今度は兄弟を参照する方法を見ていきます。"次郎"から"太郎"を参照するには、次のようになります。

var taro = jiro.previousSibling;　/*太郎*/

　逆に、"次郎"から"三郎"を参照するには、次のようになります。

var saburo = jiro.nextSibling;　/*三郎*/

　previousSiblingは、並列要素のうち、直前の要素を参照します。逆にnextSiblingは、直後の要素を参照します。以上の参照を、実際に試してみましょう。サンプルのHTMLの直後に、次のJavaScriptコードを追加します。

family_tree.html
<script type="text/javascript">
　var parent = document.getElementById('parent');　/*親要素*/
　var jiro = parent.childNodes[1];　/*次郎*/
　　/*親から見た子供*/
　alert("［parent.childNodesのテスト］\n" + jiro.id + "\n");
　　/*次郎から見た親*/
　alert("［jiro.parentNodeのテスト］\n" + jiro.parentNode.id + "\n");
　　/*次郎から見た兄弟関係*/
　alert("［jiro.previousSiblingのテスト］\n" + jiro.previousSibling.id);
　alert("［jiro.nextSiblingのテスト］\n" + jiro.nextSibling.id);
</script>

　このJavaScriptコードは、childNodes、parentNode、previousSibling、nextSiblingを使って要素を参照し、その要素のid属性値をアラートウィンドウに順次表示していきます。Internet Explorerで試すと、予想通りの結果となるでしょう。

ホワイトスペースノードに注意

　先ほど、Internet Explorerを使って試すようお願いしましたが、これには訳があります。今度はこのサンプルをFirefoxで試してください。どうでしょう。期待通りの結果が得られません。previousSiblingとnextSiblingで、期待通りとなりません。OperaおよびSafariも同様です。

　これは、すでに解説したHTMLのホワイトスペースノードの扱い方の違いによるものです。サンプルのHTMLでは、DIVタグには空白によるインデントと改行が存在します。このホワイトスペース部分が、Firefoxではホワイトスペースノードとして認識されています。そのため、jiroの直前と直後はホワイトスペースノードとして認識されているので、previousSibling、nextSiblingでは期待通りの要素を参照しなかったのです。ブラウザによるホワイトスペースノードの扱い方の違いには十分に注意してください。