child和childNodes的區別

時間 2019-12-09

標籤 child childnodes 區別简体版

原文原文鏈接

child和childNodes區別：

childNodes是標準屬性， child是非標準屬性
childNodes：獲取節點，不一樣瀏覽器表現不一樣html
- IE 只獲取元素節點
- 非IE 獲取元素節點和文本節點

解決方案： if(元素.nodeName=="#text") continue 或者 if(元素.nodeType != '3') continuenode

children: 獲取元素節點，瀏覽器表現相同（若是隻想獲取DOM節點，使用children就行）
children: 在IE8及如下，使用 someElement.children 是包含註釋節點的（能夠看到nodeType爲8是註釋節點）

<script>    
    window.onload = function() {
        let box = document.getElementById("box");
        let list = document.getElementById("list");
                
        console.log(box.childNodes);
        /**
        * nodeType      1   元素節點
        *               2   屬性節點
        *               3   文本節點
        * */
        console.log("個數",box.childNodes.length);
        console.log(box.firstChild.nodeType);//3
        /**
         * 如今咱們要取到元素節點--因爲換行、空格的存在，全部，上面的nodeType是3
         * */
        function getFirstEle(ele) {
                for(var i=0, e; e=ele.childNodes[i];i++) {      
                if(e.nodeType === 1) {
                    return e;
                }
                }
        }       
                    
                
        console.log(getFirstEle(box));// span標籤
                
        console.log("40行",box.children);// 只返回元素節點
}
</script>
</head>
<body>
    <div id="box">
        <span>a</span>
            121212
    </div>
    <ul id="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。