JavaScript操作DOM元素的childNodes和children區別

NO IMAGE

對於DOM元素,children是指DOM Object型別的子物件,不包括tag之間隱形存在的TextNode,而childNodes包括tag之間隱形存在的TextNode物件。

具體看一下針對children和childNodes在chrome環境下的測試:


<!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節點,這連個就是nodeType=3的TextNode。

如果把HTML程式碼寫成如下樣式,那麼children和childNodes的結果就沒有差別了。


<body>
<div id="div1" class="div"><span id="s1" class="sp" lang="zh-cn"></span></div>
</body>

對document、head、body及div等HTML元素實測未發現有其他差異

您可能感興趣的文章:

javascript先序遍歷DOM樹的方法JavaScript簡單遍歷DOM物件所有屬性的實現方法javascript 獲取HTML DOM父、子、臨近節點JavaScript 節點操作 以及DOMDocument屬性和方法JS DOM 操作實現程式碼javascript獲取dom的下一個節點方法詳解JS獲取HTML DOM元素的8種方法JavaScript獲取DOM元素的11種方法總結Js 獲取HTML DOM節點元素的方法小結JS/jQuery判斷DOM節點是否存在的簡單方法JS遍歷DOM文件樹的方法例項詳解