querySelector()与querySelectorAll()的区别及NodeList和HTMLCollection对象的区别

querySelector()。Document、Element类型均可调用该方法。

当用Document类型调用querySelector()方法时，会在文档元素范围内查找匹配的元素；而当用Element类型调用querySelector()方法时，只会在这个元素的后代元素中去查找匹配的元素。若不存在匹配的元素，则这两种类型调用该方法时，均返回null。

querySelectorAll()。Document、DocumentFragment、Element类型均可调用该方法。

querySelectorAll()方法返回的非实时NodeList对象

当用Element类型调用querySelectorAll()方法时，只会在这个元素的后代中去查找匹配的Element对象

若不存在匹配的对象，则这Document和Element这两种类型调用该方法时，均返回一个空的NodeList对象

getElementsByName()返回NodeList对象，而类似getElementsByTagName(),document.images和document.forms的属性为HTMLCollection对象。

这些对象都是只读的类数组对象。它们有length属性，也可以像真正的数组一样索引（只是读而不是写）。可以对一个NodeList或HTMLCollection的内容用一下标准的循环进行迭代：

不能直接在NodeList和HTMLCollection集合上调用Array的方法，但可以间接地使用：

var content=Array.prototype.map.call(document.getElementsByTagName("p"),function(e){return e.innerHTML;});

　　

HTMLCollection对象也有额外的命名属性，也可以通过数字和字符串来索引。

由于历史的原因，NodeList和HTMLCollection对象也都能当作函数：以数字或字符串为参数调用它就如同使用数字或字符串索引它们一样。不鼓励使用这种怪异的方式。

NodeList和HTMLCollection接口都不是为像JavaScript这样的动态语言设计的，它们都定义了item()方法，期望输入一个整数，并返回此索引处的元素。在JS中根本没有必要调用此方法，因为简单的使用数组索引就能替代。类似的，HTMLCollection定义了namedItem()方法，它返回指定属性名的值，但在JS中可以用数组索引或常规属性来访问。

NodeList和HTMLCollection对象不是历史文档状态的一个静态快照，而通常是实时的，并且当文档变化时它们所包含的元素列表能随之改变，这是其中一个最重要和令人惊讶的特性。假设在一个没有<div>元素的文档中调用getElementsByTagName('div')，此时返回值是一个length为0的HTMLCollection对象。如果再在文档中插入一个新的<div>元素，此元素将自动成为HTMLCollection的一个成员，并且它的length属性变成1。

通常，NodeList和HTMLCollection的实时性非常有用。但是，如果要在迭代一个NodeList对象时在文档中添加或者删除元素，首先会需要对NodeList对象生成一个静态的副本：

var snapshot=Array.prototype.slice.call(nodelist,0);