对于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>
测试结果如下:
上面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元素实测未发现有其他差异
DOM元素的childNodes和children的区别_mole的博客-CSDN博客
childNodes 属性
标准的,childNodes 属性返回节点的子节点集合,以 NodeList 对象。包括HTML节点,所有属性,文本。可以通过nodeType来判断是哪种类型的节点,只有当nodeType==1时才是元素节点,2是属性节点,3是文本节点。
所有主流浏览器都支持 childNodes 属性。
有时候需要获取指定元素的第一个HTML子节点(非属性/文本节点),最容易想到的就是firstChild 属性。代码中第一个HTML节点前如果有换行,空格,那么firstChild返回的就不是你想要的了。可以使用nodeType来判断下。
function getFirst(elem){ for(var i=0,e;e=elem.childNodes[i++];){ if(e.nodeType==1) return e; } }
获得 body 元素的子节点集合:
document.body.childNodes;
children 属性
获取 body 元素的子元素集合:
var c = document.body.children;
定义和用法:children 属性返回元素的子元素的集合,是一个 HTMLCollection 对象。
提示: 根据子元素在元素中出现的先后顺序进行排序。使用 HTMLCollection对象的 length属性获取子元素的数量,然后使用序列号(index,起始值为0)访问每个子元素。
children 属性与 childNodes 属性的差别
- childNodes 属性返回所有的节点,包括文本节点、注释节点;
- children 属性只返回元素节点;
注:IE6 到 IE8 完全支持 children 属性,但是,返回元素节点和注释节点,IE9 以上版本只返回元素节点。
小tips:HTML DOM中的children和childNodes属性 - 风雨后见彩虹 - 博客园