連載
» 2008年04月09日 00時00分 UPDATE

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では期待通りの要素を参照しなかったのです。ブラウザによるホワイトスペースノードの扱い方の違いには十分に注意してください。

       1|2 次のページへ

Copyright© 2017 ITmedia, Inc. All Rights Reserved.

@IT Special

- PR -

TechTargetジャパン

この記事に関連するホワイトペーパー

RSSについて

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

メールマガジン登録

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