childNodesプロパティ
JavaScriptでDOMを利用した処理をする場合、あるノードの子ノードを取得し、その子ノードに対して何らかの処理を行うというのは、よくあるパターンです。
今までの記事でも、子ノードを取得する場合、下記のように、DOMのchildNodesプロパティを使って取得していました。
サンプルHTML
<ul id="sample_list">
<li>this</li>
<li>is</li>
<li>a</li>
<li>test</li>
</ul>
サンプルコード
var ul = document.getElementById("sample_list");
var ch = ul.childNodes;
for (var i = 0, len = ch.length; i < len; i++) {
console.log(ch[i].nodeName);
}
実行結果(以下すべて Chrome 16 で実行)
#text //改行がTextNodeとして取得されている LI #text LI #text LI #text LI
上記のサンプルのように、childNodesプロパティで子ノードを取得した場合は、全ての子ノードのcollectionが返されます。 全ての子ノードということは、当然TextNode も含まれるので、改行やスペースがノードとして取得されています。
通常、子ノードに対して処理をする場合、TextNodeは無視したい場合がほとんどなので、子要素のcollectionをフィルタリングする必要があります。
サンプルコード
var ul = document.getElementById("sample_list");
var ch = ul.childNodes;
for (var i = 0, len = ch.length; i < len; i++) {
if (ch[i].nodeName === 'LI'){
console.log(ch[i].nodeName);
}
}
実行結果
LI LI LI LI
childrenで代用
childNodes の代わりに、childrenを使うと、TextNode は含まない、要素ノードだけのcollectionが返されます。
childrenは、IE6をはじめほぼ全てのブラウザで実装されているため、クロスブラウザの対応は特に必要ありません。
サンプルコード
var ul = document.getElementById("sample_list");
var ch = ul.children;
for (var i = 0, len = ch.length; i < len; i++) {
console.log(ch[i].nodeName);
}
実行結果
LI LI LI LI
他にも要素ノードだけを対象にしたDOM非標準プロパティとしては、firstElementChild, lastElementChild, nextElementSibling などがありますが、children以外はブラウザによっては実装されていない場合があるので、使用には注意が必要です。
まとめ
子ノードの取得には、children がつかえる！
参考文献
ハイパフォーマンスJavaScript p50
ハイパフォーマンスJavaScript
