ノード参照時におけるエラーハンドリング手法を学ぼう：DOMの基本を学ぼう（3）（2/2 ページ）
HTML文書から特定のタグ要素を参照する方法と、ノード参照の際のエラー時、その場で処理が終了しないためにすべきこととは何か。
ノード参照の際のエラー時、その場で処理が終了しないためにすべきこと
これまでのサンプルでは、該当のタグがHTMLに必ず存在するということを前提にしてきました。しかし実際には、そのタグは存在しないかもしれません。JavaScriptコードを作る人とHTMLを作る人が同じであればこのような心配は不要かもしれませんが、そうでなければ、タグ要素が存在しない場合も想定しなければいけません。JavaScriptから存在しない要素を参照し、そのプロパティを参照しようとすると、多くの場合にJavaScriptエラーとなり、その場で処理が終了してしまいます。そうならないよう、できる限りの可能性を考慮した作りにしなければいけません。ここでは、これまで学んできたノード参照時における、エラーハンドリングの手法を学んでいきます。
getElementByIdメソッドは、存在しないid属性を与えるとnullを返します。それを利用してif条件式に適用します。
if( document.getElementById('nonexistent') ) {
/*要素が存在しなかった場合の処理*/
} else {
/*要素が存在した場合の処理*/
}
nodeValueプロパティの場合も注意が必要です。例えば、タグ内に記述されたテキストを抜き出そうとした場合が想定されます。<div id="foo"></div>というタグが存在していたとしましょう。もしいきなり次のようにコードを記述してしまうと、JavaScriptエラーになります。
document.getElementById('foo').childNods[0].nodeValue;
同様に、<div id="foo"><div>テキスト</div></div>のように、テキストノードではなく要素ノードだった場合も、エラーにはなりませんがnullが返ってしまいますので、エラーハンドリングの対象になるでしょう。これらに対処するには、まず子要素が存在し、かつそれがテキストノードであることを確認しなければいけません。
hasChildNodesメソッドとnodeTypeプロパティ
DOMでは、子要素が存在するかどうかをチェックするために、hasChildNodesメソッドが用意されています。hasChildNodesメソッドは子要素が存在すればtrueを、存在しなければfalseを返します。次に、子要素が存在していたとしても、それが本当にテキストノードであるかどうかを評価するために、nodeTypeプロパティを使います。
nodeTypeプロパティは、該当ノードの種類を数字で表します。テキストノードの場合であれば3となります。ノードの種類を調べるために、nodeNameプロパティを使うこともできます。nodeNameプロパティはノードの種類を文字で返します。主要なノードの種類とnodeType、nodeName、nodeValueの対応は、表の通りです。
| ノードの種類 | nodeType | nodeName | nodeValue |
|---|---|---|---|
| 要素ノード | 1 | タグが大文字でセットされる | null |
| 属性ノード | 2 | 属性名 | 属性地 |
| テキストノード | 3 | #text | テキストの内容がセットされる |
| コメントノード | 8 | #comment | コメントの内容がセットされる |
| ドキュメントノード | 9 | #document | null |
| 表 ノードの種類とnodeType、nodeName、nodeValueの対応 | |||
hasChildNodesメソッドとnodeTypeプロパティを使ったエラーハンドリングは、次のようになります。
var foo = document.getElementById('foo');
if( foo.hasChildNodes() && foo.childNodes[0].nodeType == 3 ) {
var text = document.getElementById('foo').childNodes[0].nodeValue;
/*以下処理を継続*/
} else {
/*テキストが存在しなかった場合の処理*/
}
nodeNameプロパティで評価するのであれば、次のようになります。
var foo = document.getElementById('foo');
if( foo.hasChildNodes() && foo.childNodes[0].nodeName == '#text' ) {
var text = document.getElementById('foo').childNodes[0].nodeValue;
} else {
}
NodeListのエラーハンドリング
getElementsByTagNameメソッドの場合は、指定したタグ名の要素が存在しなかったとしてもnullを返しません。空のNodeListを返します。そのため、NodeListのlengthプロパティを使って、要素長を評価します。
var nodeList = document.getElementsByTagName('div');
if(nodeList.length > 0) {
/*要素が存在した場合の処理*/
} else {
/*要素が存在しなかった場合の処理*/
}
例外処理
JavaScriptエラーだけをトラップ（捕捉）したいのであれば、JavaScriptの例外処理を使うのもひとつの手でしょう。
DOMの処理の部分をまとめてtry内に記述し、エラー時の処理をcatch内に記述します。細かい制御まではできませんが、少なくともどんな状況下でもJavaScriptエラーだけはトラップすることができます。
try {
/*DOM処理*/
} catch(e) {
/*エラー字の処理*/
alert('Error: ' + e);
}
Copyright © ITmedia, Inc. All Rights Reserved.