DOM: childNodes与children

我们在操作DOM的时候经常会和childNodes和children打交道，那么这2个属性究竟有什么区别呢?今天就来总结一下：

childNodes属性返回的是一个NodeList对象，是一个节点的集合，可包含元素节点及其它节点，在DOM中，节点的类型总共有12种，通过判断节点的nodeType来判断节点的类型。

我们经常使用的2种方式会返回一个NodeList对象，一种是Node.childNodes,另一种是 document.querySelectorAll()。注意：querySelectorAll方法返回的是一个静态的（static）对象，只包含元素节点，下面会解释动态和静态的区别。

children属性返回的是一个HTMLCollection对象，是元素节点的集合，有很多属性返回的都是HTMLCollection对象，常用的有document.getElementsByXXX, Node.children, document.images,document.forms等。

无论是NodeList或者HTMLCollection都是动态的（live）,除了querySelectorAll()这个奇葩，那什么是动态什么又是静态呢？

从上图可以看到，我动态的给ul插入一个新创建的li，无论是NodeList或者HTMLCollection都不需要再次获取就能实时的改变，这就是动态性（live）,而querySelectorAll()获取的NodeList反而没有变化，这就是静态（static）。

这两个对象的原型上都有一个item()方法，传入索引就能获取相对应的的子节点，但是HTMLCollection对象多了一个namedItem（）方法, 参数是string，传入元素的id或者name属性，返回具有指定 id 或 name 属性的元素或节点。如果 HTMLCollection 中没有这样的节点，则返回 null。

在Chrome50+版本，NodeList对象的原型上多增加了好几个方法，Node.entries()、Node.forEach()、Node.keys()、Node.values()，有兴趣的可以自己研究一下,这里就不详细深入了。

结语：我们平常写代码时用的最多的就是children属性，childNodes还要判断节点类型，太过于麻烦，毕竟一般情况下我们都只想获取元素节点。别忘了document.querySelector()这个奇葩，返回的是一个NodeList对象，但只包含元素节点，而且还是静态的。