children（HTMLCollection）
children返回的是一个元素的子元素，只包括元素节点，不包含文本节点、注释节点
<script>
window.onload = function(){
var oUl = document.getElementsByTagName('ul')[0];
console.log(oUl.children.length) // 2
}
</script>
<body>
<ul> i am text node
<li></li> i am text node too
<li></li><!--this is note-->
</ul>
</body>
childNodes (Nodelist)
childNodes返回的是所有子节点的一个集合，包括元素节点、文本节点、注释节点（如果一段文本被一个注释所分开，那么这里就有三个节点：文本节点、注释节点、文本节点）
<script>
window.onload = function(){
var oUl = document.getElementsByTagName('ul')[0];
console.log(oUl.childNodes.length) // 2
}
</script>
<body>
<ul> i am text node
<li></li> i am text node too
<li></li><!--this is note-->
</ul>
</body>
补充
关于nodeType：
元素节点：nodeType === 1
属性节点：nodeType === 2
文本节点：nodeType === 3
注释节点：nodeType === 8
文档节点(document)：nodeType === 9
关于HTMLCollection和NodeList：
主要区别是，NodeList可以包含各种类型的节点，HTMLCollection只能包含 HTML 元素节点。
NodeList
NodeList的成员可以是任意类型的节点
NodeList可以是动态的（element.childNodes）也可以是静态的(document.querySeletorAll())
所谓动态指的是这个集合是动态的，如果动态添加子元素，那么这个集合也会发生变化
NodeList有length，forEach方法，keys()，values()等，是一个类数组
HTMLCollection
HTMLCollection是一个节点对象的集合，只能包含元素节点（element），不能包含其他类型的节点。它的返回值是一个类似数组的对象，但是与NodeList接口不同，HTMLCollection没有forEach方法，只能使用for循环遍历。
返回HTMLCollection实例的，主要是一些Document对象的集合属性，比如document.links、document.forms、document.images等。
以及document.getElementsByTagName(),document.getElementsByClassName(),element.children()等
HTMLCollection实例都是动态集合，节点的变化会实时反映在集合中
网友评论