1、childNodes属性是用来获取任何一个元素的所有子元素,它是包含一个元素全部子元素的数组。返回元素节点、属性节点和文本节点。
- (极端情况):html的body中什么都不写;
<body></body>
window.onload = function (){
var oBody = document.getElementsByTagName('body')[0];
var aChild = oBody.childNodes;
alert(aChild.length); //1
};
body元素默认有一个文本节点,如果在里面直接写文本,值仍为1。
- 如果添加两个div元素:
<body><div></div><div></div></body>
值为3,2个元素节点和一个文本节点(文本节点可以通过nodeType属性值为3确认)。
- 空格和换行符都会被解释为节点
<body>
<div></div>
<div></div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
节点数为7
- 利用nodeType输出body子节点的所有类型
for(var i = 0; i < aChild.length; i++) {
alert(aChild[i].nodeType); //3 1 3 1 3 1 3
}
2 、children 只返回 元素节点
var oBody = document.getElementsByTagName('body')[0];
var aChild = oBody.children;
上述childNodes属性输出为7的情况下,利用children输出为3(只包含元素节点)
3、两者的不同
childNodes:不同浏览器获取不同
IE: 只获取元素节点;
非IE:获取元素节点与文本节点;
解决方案:if(childNode.nodeName=="#text") continue 或者 if(childNode.nodeType != '3') continue