child和childNodes的区别

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>
上一篇:Plugin is too old, please update to a more recent version, or set ANDROID_DAILY_OVERRIDE environment variable to “*****”


下一篇:instance与type区别