javascript中的动态集合——NodeList、HTMLCollection、NamedNodeMap

矫情吗；* 2022-05-23 05:45 137阅读 0赞

一、`NodeList`、`HTMLCollection`、`NamedNodeMap`的相同点与不同点  
（1）相同点  
1. 三者都是类数组对象  
2. 都有`item()`方法

（2）不同点  
1. `NodeList`是节点（12种）的集合、`HTMLCollection`是元素节点的集合、`NamedNodeMap`是属性节点的集合  
2. `NodeList`有静态的、有动态的，`HTMLCollection`和`NamedNodeMap`都是动态集合

二、NodeList

> NodeList 对象代表一个有序的节点列表.

哪些返回`NodeList`？

`childNode`：返回动态NodeList，基于DOM结构动态执行查询的结果，因此DOM结构的变化能够自动的反应在NodeList对象中。

var oDiv=document.getElementById("container");
     console.log(oDiv.childNodes.length);//3
     console.log(oDiv.childNodes instanceof NodeList);//true

`document(element).querySelectorAll("...")`：返回静态NodeList，类似一组元素的快照

var oDiv1=document.querySelectorAll("#container");
      console.log(oDiv1);//NodeList [div#container]
      console.log(oDiv1 instanceof NodeList);//true

三、HTMLCollection

> HTMLCollection 是一个接口，表示 HTML 元素的集合，它提供了可以遍历列表的方法和属性。  
> 哪些返回`HTMLCollection`呢？

1.  `document.getElementsByName`
2.  `document.getElementsByTagName`
3.  `document.getElementsByClassName`
4.  `document.forms`、`document.forms[0].elements`、 `document.images`、 `document.links`

四、NamedNodeMap

> NamedNodeMap 对象代表一个节点的无序列表。

哪些返回`NamedNodeMap`?

`element.attributes`

var oDiv=document.getElemenById("container");
    console.log(oDiv.attributes);//NamedNodeMap {
       0: id, id: id, length: 1}
    console.log(oDiv.attributes instanceof NamedNodeMap);//true

五、将三种类数组对象转化为数组  
前面提到：这三种对象都是类数组对象，那么如何将`NodeList`对象转化为数组呢？

更多关于数组、对象、类数组对象的讨论，请参考：[数组、对象、类数组对象的不同以及类数组转数组方法总结][Link 1]

[Link 1]: https://blog.csdn.net/liwenfei123/article/details/78505784