【JavaScript】JS的NodeList对象

NodeList与HTML Collection

getElementsByClassName()和getElementsByTagName()都返回NodeList对象，

而类似document.images和document.forms的属性为HTML Collection对象。

NodeList和HTML Collection对象不是历史文档状态的一个静态快照，而通常是实时的。

也许你会问，通过这种方式获取的这一组dom元素不就是一个数组吗？

有length属性，可以索引取值，一定是数组吗？

好像arguments也是这样吧，但它真的不是数组（Array)。

如何验证NodeList不是数组？

最直接的方法就是试一下Array专有的push和pop大法。无一例外会提示没有push或者pop方法。

类数组有arguments、NodeList、HTML Collection。

类数组对象的陷阱：for-in

原理是这样的，for-in遍历的是元素的所有属性，包括原型链中的属性，所以会打印出keys，entries这种原型链的属性。

可以用hasOwnProperty()方法来填平for-in的坑，因为这个方法是用于判断当前属性是否是对象的自有属性。

如何将类数组对象转换为普通对象？

1. for循环复制到新的对象中
2. 使用Array.prototype.slice方法

getElementsByClassName()什么时候加[0] ？

ID名查找元素，DOM规定ID名在页面和在元素那里只能一个，所以查找ID不需要加[0]。

而标签和类型则不同，DOM规定它们可以是多个，所以标签和类名获取要加[0]来获取它们是第几个。

为何只有一个类时，getElementsByClassName()也需要加[0]才能工作？

document.getElementsByClassName()将返回具有给定类名的元素列表。

即使只有一个元素具有这个类名，它也将出现在节点列表中，这就是为什么必须使用[0]。