JavaScript-html Dom中的HTMLCollection和NodeList

淩亂°似流年 2022-05-18 02:53 505阅读 0赞

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'>
              
              <span >item1</span>
              <span >item2</span>
              <span >item3</span>
          </div>
         
       <script type="text/javascript">
          var target=document.getElementsByTagName('div');
          console.log(target);    
       </script>

打印结果如下：

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

![70 1][]我们注意到有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'>
              
              <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>

![70 2][]这一点需要注意，**querySelectorAll没有实时性。**

[70]: /images/20220518/7621a449f27b4daca41c3aab49d0bf0a.png
[70 1]: /images/20220518/93e18a4ee7684b7bbc27951310827e87.png
[70 2]: /images/20220518/5dbed50a79184bac965df46268ccba2d.png