DOM 之 children & childNodes

時間 2019-12-05

原文原文鏈接

在前臺開發中，咱們作的最多的操做之一即是遍歷給定DOM節點的節點，並對相應的子節點作一些進一步的操做，如：節點排序，添加樣式，ect。在本地的DOM元素節點上存在這樣兩個屬性children和childNodes，經過這兩個屬性咱們都能完成通常性的子節點操做，因爲這兩個屬性在名稱上十分類似，咱們一般困惑於到底該使用哪一個屬性，本文現就這兩個屬性的特色和相互之間的區別作簡單的介紹。 html

Element.children node

做用：返回給定元素節點的元素節點集合。瀏覽器

1.非W3C標準 , 可是基本上全部的瀏覽器都實現了該屬性，因此也能夠稱做是事實上的標準 dom

2.基本語法 var elCol = elemNode.children ; 函數

3..返回值類型：HTMLCollection , 包含當前元素的全部子元素節點（Element Node）的有序列表集合。若是沒有子元素節點那麼該集合的長度爲0; spa

4.兼容性列表 code

Feature orm	Chrome htm	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標準