使用JavaScript访问子节点方法elementNode.childNodes时，需要注意的地方

有这样一个HTML结构

<div>
  javascript 
  <p>javascript</p>
  <div>jQuery</div>
  <h5>PHP</h5>
</div>

 

使用JavaScript访问它的子节点

var children = document.getElementsByTagName('div')[0].childNodes;

children.length // 7

正如你看到的，children.length的结果不是4，而是7！为什么呢？

 

因为浏览器会把节点之间的空白符当作文本结点处理。

<div>
  javascript  
  <p>javascript</p> <!-- ←空白结点 -->
  <div>jQuery</div> <!-- ←空白结点 -->
  <h5>PHP</h5> <!-- ←空白结点 -->
</div>

4个可见结点 + 3个看不出来的空白结点 = 7个结点

 

这可以通过用JavaScript判断结点类型（元素的nodeType值为1，文本的nodeType值为3）的方式来进行验证

var children = document.getElementsByTagName('div')[0].childNodes;
for (var i = 0; i < children.length; i++) {
    if (children[i].nodeType === 1) {        // 如果是元素结点 
        document.write(children[i].innerText + '<br>');
    } else if (children[i].nodeType === 3) { // 如果是文本结点
        document.write(' "' + children[i].nodeValue +'"<br>');
    }    
}

页面输出的结果是这样的

" javascript "
javascript
" "
jQuery
" "
PHP
" "

 

（完）