DOM 之 children & childNodes

在前台开发中，我们做的最多的操作之一便是遍历给定DOM节点的节点，并对相应的子节点做一些进一步的操作，如：节点排序，添加样式，ect。在本地的DOM元素节点上存在这样两个属性children和childNodes，通过这两个属性我们都能完成一般性的子节点操作，由于这两个属性在名称上十分相似，我们通常困惑于到底该使用哪个属性，本文现就这两个属性的特点和相互之间的区别做简单的介绍。

Element.children

作用：返回给定元素节点的元素节点集合。

1.非W3C标准 , 但是基本上所有的浏览器都实现了该属性，所以也可以称作是事实上的标准

2.基本语法 var elCol = elemNode.children ;

3..返回值类型：HTMLCollection , 包含当前元素的所有子元素节点（Element Node）的有序列表集合。如果没有子元素节点那么该集合的长度为0;

4.兼容性列表

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	1	3.5	9 (IE6-8 incl commend nodes)	10	4

注意的IE9之前的版本（IE6/7/8）会列出注释节点

5.例子：

//将ul(#list)下所有节点索引为基数的li元素的背景变为黄色

<ul id="list">
    <!--This is a comment node-->
    <li>item-1</li>
    <li>item-2</li>
    <li>item-3</li>
</ul>

//在parentElem的所有子元素节点上调用fn函数

function elemEach(parentElem , fn){
     if(parentElem && parentElem .nodeType==1 
                   && parentElem.children 
                   && typeof fn =="function"){

           var elCol = parentElem .children;

           var length = elCol.length ;

           var curElemNode = null ;

           for(var i = 0 ; i < length ; i++){

               curElemNode = elCol.item(i)

              //过滤掉IE中的comment类型节点

              if(curElemNode.nodeType == 1){

                fn(i ,curElemNode) ;                                        

              }

           }

      }

}

var list = document.getElementById("list");

elemEach(list , function(index , elem){

      if((index+1) % 2 == 0){

          elem.style.backgroundColor = "yellow" ;

      }
});

6.该属性为只读属性，同样不能通过为该属性赋值来改变父节点的子节点内容，如

//此操作不起任何作用

list.children = document.createElement("div");

Element.childNodes

作用：返回给定元素节点的所有子节点集合

1.W3C标准 ,参见http://www.w3.org/TR/2012/WD-dom-20120405/#interface-node

2.基本语法 val childNodeList = elemNode.childNodes ;

3.返回值类型：NodeList , 包含当前元素的所有子节点的有序列表，子节点类型包括：元素节点（Element Node），注释节点（Comment Node），文本节点（Text Node），没有子节点时，该集合的长度为0;

4.兼容性 IE/Chrome/Firefox/Safari/Opera

5.例子：

//将ul(#list)下所有节点索引为基数的li元素的背景变为黄色

<ul id="list">
     <!--This is a comment node-->
     <li>item-1</li>
     <li>item-2</li>
     <li>item-3</li>
</ul>

//在parentElem的所有子元素节点上调用fn函数

function elemEach(parentElem , fn){

       if(parentElem && parentElem .nodeType==1 
                     && typeof fn =="function"){

            var elCol = parentElem .childNodes;

            var length = elCol.length ;

            var curElemNode = null ;

            var elemIndex = 0 ;

            for(var i = 0 ; i < length ; i++){

                 curElemNode = elCol.item(i)

                 //过滤掉 CommentNode , TextNode

                if(curElemNode.nodeType == 1){

                     fn(elemIndex ,curElemNode) ;        

                     elemIndex++;                                

                }

            }
       }
}

var list = document.getElementById("list");

elemEach(list , function(index , elem){

       if((index+1) % 2 == 0){

            elem.style.backgroundColor = "yellow" ;

        }
});

6.该属性为只读属性，不能通过为该属性赋值来改变父节点的子节点内容，如

//此操作不起任何作用

list.childNodes = document.createElement("div");

小结:

从以上对两个属性的简单介绍中我们可以大致看出它们的一些共性和区别，如下

共性：

1.基本语法结构相同

2.都为只读属性

3.主流浏览器都实现了两个属性

区别：

1.标准的差异性

children非W3C标准 ; childNodes为W3C DOM标准