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

2024-05-06 16:18:00

字體：大中小

來源：轉載

供稿：網友

這篇文章主要介紹了JavaScript操作DOM元素的childNodes和children區別,本文直接給出測試代碼和運行效果來講解它們之間的區別,需要的朋友可以參考下

對于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>