child和childNodes的区别

最新推荐文章于 2021-08-23 21:35:52 发布

weixin_34294649

最新推荐文章于 2021-08-23 21:35:52 发布

阅读量116

点赞数

原文链接：http://www.cnblogs.com/xiaqilin/p/8535191.html

版权

child和childNodes区别：

childNodes是标准属性， child是非标准属性
childNodes：获取节点，不同浏览器表现不同
- IE 只获取元素节点
- 非IE 获取元素节点和文本节点

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

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>

转载于:https://www.cnblogs.com/xiaqilin/p/8535191.html