<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div id="div1" class="div">
<span id="s1" class="sp" 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
1.childNodes返回的是节点的子节点集合，包括元素节点、文本节点还有属性节点，所以上面代码中，两个undefined其实是元素节点后面跟的回车符，默认为一个文本节点。
2.children返回的只是节点的元素节点集合，所以返回的只有span元素。
所以在判断是否有子节点的时候要注意..尽量使用children吧
3.也可以使用hasChildNodes方法来判断,但是要注意如果节点下有回车符之类的,hasChildNodes也会判定存在节点..
网友评论