JavaScript操作DOM元素的childNodes和children區(qū)別

字號:


    對于DOM元素,children是指DOM Object類型的子對象,不包括tag之間隱形存在的TextNode,而childNodes包括tag之間隱形存在的TextNode對象。
    具體看一下針對children和childNodes在chrome環(huán)境下的測試:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    </head>
    <body>
    <div id="div1">
    <span id="s1" lang="zh-cn">
    </span>
    </div>
    </body>
    <script type="text/javascript">
    function test() {
    var o = document.getElementById("div1");
    var child = o.children;
    console.log("div1.children運行結果:");
    for(i = 0; i < child.length; i++){
    console.log(child[i].tagName);
    }
    console.log("");
    child = o.childNodes;
    console.log("div1.childNodes運行結果:");
    for(i = 0; i < child.length; i++){
    console.log(child[i].tagName);
    }
    }
    test();
    </script>
    </html>
    測試結果如下:
    div1.children運行結果:
    SPAN
    div1.childNodes運行結果:
    undefined
    SPAN
    undefined
    上面childNodes集合的結果中有兩個undefined節(jié)點,這連個就是nodeType=3的TextNode。
    如果把HTML代碼寫成如下樣式,那么children和childNodes的結果就沒有差別了。
    <body>
    <div id="div1"><span id="s1" lang="zh-cn"></span></div>
    </body>
    對document、head、body及div等HTML元素實測未發(fā)現(xiàn)有其他差異