先日、javascriptでDOMを使って特定の要素のStyleを変更しようと思い、childNodesプロパティで要素を取得しようと試みていたところ少し手間取った。

childNodesは子ノードを取得するので、要素だけでなくテキストノードつまり改行などの空白のtextも取得してしまうようだ。

そこで、textノードを削除して要素だけを取り出すコードを書いてみた。

HTML

<div id=wrap>
  <div></div>
  <div></div>
  <div></div>
</div>

この状態で#div1のchildNodesを取得すると、

#text
<div>
#text
<div>
#text
<div>

となってしまうのでこの#textをjavascriptで削除する。

var wrap = document.getElementById('wrap');
var child = wrap.childNodes;
var i = 0;

while(i <= child.length) {
  if(child[i].nodeName == #text) {
    wrap.removeChild(child[i]); //textノードを削除
  }
i++;
}

これで要素のみを取り出すことができる。

childNodesに引数を取る方法もあるが、削除してしまった方が管理が楽。

削除したくないtextノードがある場合はspanタグやpタグで囲めば回避できる。

追記：childrenを使えばいいことに後日気付く・・・