<!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運行結(jié)果:");
for(i = 0; i < child.length; i++){
console.log(child[i].tagName);
}
console.log("");
child = o.childNodes;
console.log("div1.childNodes運行結(jié)果:");
for(i = 0; i < child.length; i++){
console.log(child[i].tagName);
}
}
test();
</script>
</html>
div1.children運行結(jié)果:
SPAN
div1.childNodes運行結(jié)果:
undefined
SPAN
undefined
1.childNodes返回的是節(jié)點的子節(jié)點集合狞甚,包括元素節(jié)點、文本節(jié)點還有屬性節(jié)點裂允,所以上面代碼中,兩個undefined其實是元素節(jié)點后面跟的回車符哥艇,默認為一個文本節(jié)點绝编。
2.children返回的只是節(jié)點的元素節(jié)點集合,所以返回的只有span元素貌踏。
所以在判斷是否有子節(jié)點的時候要注意..盡量使用children吧
3.也可以使用hasChildNodes方法來判斷,但是要注意如果節(jié)點下有回車符之類的,hasChildNodes也會判定存在節(jié)點..