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>