DOM基础之childNodes()

首先观察下面的代码：

<div id="myDiv">
    <div >1</div>
    <div >2</div>
    <div >3</div>
</div>

<script type="text/javascript">
var myDiv=document.getElementById('myDiv');
var divs=myDiv.getElementsByTagName('div');

divs[2].style.display='none';
myDiv.childNodes[0].style.display='none';

/*浏览器显示结果为：只有内容为"3"的div隐藏*/
</script>

该段代码显示了dom节点的属性“childNodes”和方法“getElementsByTagName()”的使用。

（1）somenode.childNodes和somenode.getElementsByTagName()都返回一个类数组对象--Nodelist。

该对象具有length属性，也可以用"[]"语法获取对象中具体的某一项。

（2）针对childNodes属性，有一些需要注意的地方。

首先，不同于getElementsByTagName('x')方法（返回x元素集合），childNodes返回的是子节点（一级子节点）的集合，这也解释了上面代码执行的最后结果。其实关于上面的脚本中，可以使用alert(divs.length)和alert(myDiv.childNodes.length)分别进行检验：

alert(divs.length);结果为3

alert(myDiv.childNodes.length);结果为7（非ie浏览器或ie9）/结果为3（ie6）

divs引用的Nodelist对象为三个子div：<div>1</div><div>2</div><div>3</div>，所以length为7

而对于childNodes属性返回的对象则是(在非ie浏览器或ie9中)：三个子div元素（节点）和四个文本节点，一共七个节点，length为7。如下图所示：

而对于childNodes在ie6中，返回的则是3个子div，所以length为3。

再返回到最开始的脚本中，"myDiv.childNodes[0].style.display='none'"一行，因为myDiv.childNodes[0]实际上是一个TEXT_NODE而且其nodeValue为空字符串（html中显示的空白），因此不具备myDiv.childNodes[1/3/5](ELEMENT_NODE)所具有的style属性，自然执行失败。

 

因此，如果将上述html部分改成下面：

<div id="myDiv"><div >1</div><div >2</div><div >3</div></div>

那么脚本的执行结果就会统一了（ie和非ie均为3），因为不存在TEXT_NODE了。

 

这里提到了TEXT_NODE(文本节点)和ELEMENT_NODE(元素节点)，这时节点的nodeType属性，用于表明节点类型。

每个节点都有nodeType属性，dom中具有12种节点类型且分别有一个数值常量与其对应。如下：

Node.ELEMENT_NODE(1);
Node.ATTRIBUTE_NODE(2);
Node.TEXT_NODE(3);
Node.CDATA_SECTION_NODE(4);
Node.ENTITY_REFERRENCE_NODE(5);
Node.ENTITY_NODE(6);
Node.PROCESSING_INSTRUCTION_NODE(7);
Node.COMMENT_NODE(8);
Node.DOCUMENT_NODE(9);
Node.DOCUMENT_TYPE_NODE(10);
Node.DOCUMENT_FRAGMENT_NODE(11);
Node.NOTATION_NODE(12);

每个节点必属以上类型之一，据此，我们可以按照以下方式来判断节点类型：

if(someNode.nodeType==Node.ELEMENT_NODE){

   alert('该节点是元素节点');

}

但是，对于该判断方法，在ie中是不起作用的。因为IE没有公开Node类型的构造函数，所以Node.****是无法访问到的，所以为了确保兼容，还是采取数字常量进行比较。即：

if(someNode.nodeType==1){

   alert('该节点是元素节点');

}。

 

参考：

《javascript高级程序设计》第二版   作者：Nicolas C.Zakas