NodeList、HTMLCollection和NamedNodeMap

上篇文章以arguments为例讲到了类数组对象，这篇我们讨论更多的类数组对象NodeList、HTMLCollection和NamedNodeMap。既然是类数组对象，这3种对象也都能应用上篇文章中提到的类数组对象的可用方法，下面主要讲讲这3种对象的应用及区别。

HTMLCollection

可以从字面上理解，也就是HTML元素的集合，是一个类数组对象。一般包括getElementsByTagName()、getElementsByClassName()、getElementsByName()等方法的返回值，以及children、document.links、document.forms等元素集合。

<div></div>
<div></div>
<script>
var divs = document.getElementsByTagName("div"); console.log(Array.prototype.toString.call(divs));//"[object HTMLCollection]" console.log(divs.length);//2 </script>

HTMLCollection是动态的，也就是说对其的增删改都会更新到这个类数组对象中。

<div></div>
<div></div>
<script>
var divs = document.getElementsByTagName("div"); var newDiv = document.createElement("div"); divs[0].parentNode.appendChild(newDiv);//添加一个新div console.log(divs);//[div,div,div] </script>

NodeList

同样可以从字面上理解，节点集合，是一个类数组对象，通常由childNodes和querySelectorAll()返回。与HTMLCollection不同的是，NodeList是Node集合，包括但不仅限于HTMLCollection中的元素节点，还可以是其他节点。Node节点共有12种，这里不详细介绍。

<div>
  <p></p>
</div>
<script>
var divs = document.getElementsByTagName("div"); //childNode返回值 console.log(Array.prototype.toString.call(divs[0].childNodes));//"[object NodeList]" console.log(divs[0].childNodes);//[text,p,text] //querySelectorAll返回值 console.log(Array.prototype.toString.call(document.querySelectorAll("p")));//"[object NodeList]" console.log(document.querySelectorAll("p"));//[p] </script>

要注意一点，NodeList不像HTMLCollection都是动态的，通过querySelectorAll()返回的NodeList是静态的，相当于获取时刻的一个快照。

<div>
  <p></p>
</div>
<script>
var divs = document.getElementsByTagName("div"); var listChild = divs[0].childNodes; var listQuery = document.querySelectorAll("p"); divs[0].appendChild(document.createElement("p")); //childNodes返回值为动态的，增加了一个p元素 console.log(listChild);//[text,p,text,p] //querySelectorAll返回值为静态，没有变化 console.log(listQuery);//[p] </script>

NamedNodeMap对象

NamedNodeMap对象比较少见，较为常见的是其实例对象attributes属性。

<div id="myDiv" class="bd"></div>
<script>
var div = document.getElementById("myDiv"); var attrs = div.attributes; console.log(Array.prototype.toString.call(attrs));//"[object NamedNodeMap]" console.log(attrs);// {0: id, 1: class, length: 2} </script>

NamedNodeMap也是动态的

<div id="myDiv" class="bd"></div>
<script>
var div = document.getElementById("myDiv"); var attrs = div.attributes; div.title = "hello"; console.log(attrs);//{0: id, 1: class, 2: title, length: 3} </script>

 

注意：这3种对象基本都是动态集合（querySelectorAll获得的NodeList为静态），这会带来一些便利，但也会带来较大的性能开销。每次访问这类动态集合，都会执行一次文档的搜索，因此要尽量减少DOM操作。而对于与其相关的定值，比如divs.length，若需多次使用，可以考虑将其值缓存起来，以免每次应用时都要进行一次查询。

转载于:https://www.cnblogs.com/youhong/p/6896133.html