JavaScript-html Dom中的HTMLCollection和NodeList

HTMLCollection对象

HTMLCollection是元素集合，它和NodeList很像，有length属性来表示HTMLCollection对象的长度，也可以通过elements.item()传入元素索引来访问。当时它还有一个nameItem()方法，可以返回集合中name属性和id属性值得元素。

可以通过三种方法获取HTMLCollection对象

1：getElementsByTagName() 

2：document.forms.item()

3:   document.forms.namedItem()

HTMLCollection 对象类似 HTML 元素的一个数组,获取的是html元素集合。

 

NodeList对象

NodeList 对象是一个从文档中获取的节点列表 (集合) 。一些旧版本浏览器中的方法（如：getElementsByClassName()）返回的是 NodeList 对象，而不是 HTMLCollection 对象。所有浏览器的 childNodes 属性返回的是 NodeList 对象。大部分浏览器的 querySelectorAll() 返回 NodeList 对象。NodeList对象有个length属性和item()方法，length表示所获得的NodeList对象的节点个数，这里还是要强调的是节点，而item()可以传入一个索引来访问Nodelist中相应索引的元素。

NodeList是一个节点的集合(既可以包含元素和其他节点)。

 

看如下代码：

      <div class='target'>
          <!-- 666 -->
          <span >item1</span>
          <span >item2</span>
          <span >item3</span>
      </div>
     
   <script type="text/javascript">
      var target=document.getElementsByTagName('div');
      console.log(target);    
   </script>

 打印结果如下：

得到是HTMLCollection对象，我们看一下div,target的ChildNodes，因为它是NodeList对象,

我们注意到有9个节点，分别是div与注释节点的空白文本节点，注释节点，注释节点和<span>之间的空白文本节点，然后依次类推，直到最后一个span与div的空白文本节点。

 

HTMLColection 与 NodeList 的区别
HTMLCollection 是 HTML 元素的集合。
NodeList 是一个文档节点的集合。
NodeList 与 HTMLCollection 有很多类似的地方。
NodeList 与 HTMLCollection 都与数组对象有点类似，可以使用索引 (0, 1, 2, 3, 4, ...) 来获取元素。
NodeList 与 HTMLCollection 都有 length 属性。
HTMLCollection 元素可以通过 name，id 或索引来获取。
NodeList 只能通过索引来获取。
只有 NodeList 对象有包含属性节点和文本节点。

它们看起来像一个数组但是不是数组，可以叫类数组，无法使用数组的方法： valueOf(), pop(), push(), 或 join()。

 

HTMLCollection和NodeList 实时性

它们能随着文档的改变而改变，当我们用js插入删除节点是它们也随之改变。

querySelectorAll这个接口返回的nodeList对象比较特殊，它是个静态的对象。

看如下代码：

      <div class='target'>
          <!-- 666 -->
          <span >item1</span>
          <span >item2</span>
          <span >item3</span>
      </div>
     
   <script type="text/javascript">
      var target1=document.getElementsByTagName('span');
      var target2=document.querySelectorAll('span');
      console.log(target1.length); 
      console.log(target2.length); 

      document.getElementsByTagName('div')[0].appendChild(document.createElement('span'));
      console.log(target1.length); 
      console.log(target2.length); 
   </script>

这一点需要注意，querySelectorAll没有实时性。