我在學習JavaScript對DOM操作的過程中，發現了使用childNodes屬性，得不到我想要的結果，因此我就從JavaScript高級程序設計中了解了childNodes和children的區別。
首先來看一下一下代碼
<!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
之所以會出現以上的情況是因為
- childNodes返回的是節點的子節點集合，包括元素節點、文本節點還有屬性節點，所以上面代碼中，兩個undefined其實是元素節點后面跟的回車符，默認為一個文本節點。
- children返回的只是節點的元素節點集合，所以返回的只有span元素。