(85)Wangdao.com第十八天_JavaScript NodeList 接口，HTMLCollection 接口

NodeList 接口        HTMLCollection 接口

節點都是單個對象，有時須要一種數據結構，可以容納多個節點

DOM 提供兩種節點集合，用於容納多個節點：NodeList 和 HTMLCollection

 

這兩種集合都屬於接口規範。

許多 DOM 屬性和方法，返回的結果是 NodeList 實例或 HTMLCollection 實例。

主要區別是

NodeList 能夠包含各類類型的節點

HTMLCollection 只能包含 HTML 元素節點。

 

NodeList 接口

• • NodeList 實例是一個相似數組的對象，能夠使用 length 屬性和 forEach 方法。可是，它不是數組，不能使用 pop() 或 shift() 之類數組特有的方法。

    • • var children = document.body.childNodes;
        
        Array.isArray(children);    // false
        
        children.length;    // 34
        children.forEach(console.log);    // forEach() 遍歷 NodeList 實例
        
        

        for (var i = 0; i < children.length; i++) { // for 遍歷 NodeList 實例 var item = children[i]; }

      • 若是 NodeList 實例要使用數組方法，能夠將其轉爲真正的數組

        • var children = document.body.childNodes;
          var nodeArr = Array.prototype.slice.call(children);

  • 它的成員是節點對象。
  • 經過如下方法能夠獲得 NodeList 實例
    • Node.childNodes
    • document.querySelectorAll()等節點搜索方法
  • 注意：
    • NodeList 實例多是動態集合，也多是靜態集合。
      • 所謂動態集合就是一個活的集合，DOM 刪除或新增一個相關節點，都會馬上反映在 NodeList 實例。
    • 目前，只有 Node.childNodes 返回的是一個動態集合，其餘的 NodeList 都是靜態集合。

  • var children = document.body.childNodes;
    children.length;    // 18
    document.body.appendChild(document.createElement('p'));
    children.length;    // 19    // 文檔增長一個子節點，NodeList 實例 的 屬性就增長了1childrenlength

 

• NodeList.prototype.length
  • 返回 NodeList 實例包含的節點數量。
  • 對於那些不存在的 HTML 標籤，length 屬性返回 0

    document.getElementsByTagName('xxx').length;    // 0

     

• NodeList.prototype.forEach()
  • 用於遍歷 NodeList 的全部成員。
  • 它接受一個回調函數做爲參數，每一輪遍歷就執行一次這個回調函數
  • 用法與數組實例的 forEach() 方法徹底一致

    • var children = document.body.childNodes;
      children.forEach(function f(item, i, list) {
          // ...
      }, this);    // forEach方法的第二個參數，用於綁定回調函數內部的this，該參數可省略
      // 回調函數f的三個參數依次是
          // 當前成員
          // 在類數組中的 index
          // 當前 NodeList 實例。

 

• NodeList.prototype.item( posIndex )
  • 接受一個整數值做爲參數，表示成員的位置，返回該位置上的成員
  • 全部相似數組的對象，均可以使用方括號運算符取出成員。通常狀況下，都是使用方括號運算符，而不使用item方法。
    

    • document.body.childNodes.item(0);    // item(0)返回第一個成員
      document.body.childNodes[0];    // 最爲經常使用 
      

       

  • 若是參數值大於實際長度，或者索引不合法（好比負數），item方法返回null。
  • 若是省略參數，item 方法會報錯

 

• NodeList.prototype.keys()，NodeList.prototype.values()，NodeList.prototype.entries()
  • 這三個方法都返回一個 ES6 的遍歷器對象
  • 能夠經過for...of循環遍歷獲取每個成員的信息
  • 區別在於
    • keys()返回鍵名的遍歷器
    • values()返回鍵值的遍歷器
    • entries()返回的遍歷器同時包含鍵名和鍵值的信息。

  • var children = document.body.childNodes;
    
    for (var key of children.keys()) {
        console.log(key);
    }
    // 0
    // 1
    // 2
    // ...
    
    for (var value of children.values()) {
        console.log(value);
    }
    // #text
    // <script>
    // ...
    
    for (var entry of children.entries()) {
        console.log(entry);
    }
    // Array [ 0, #text ]
    // Array [ 1, <script> ]
    // ...

 

HTMLCollection 接口 

• 概述
  • HTMLCollection 是一個節點對象的集合，只能包含元素節點（element），不能包含其餘類型的節點。
  • 它的返回值是一個相似數組的對象，可是與NodeList接口不一樣，HTMLCollection沒有forEach方法，只能使用for循環遍歷。

 

• • 返回 HTMLCollection 實例的，主要是些 document 對象的集合屬性
    • 好比 document.forms、document.images、document.links 等等

      • document.links instanceof HTMLCollection    // true

  • HTMLCollection 實例都是動態集合，節點的變化會實時反映在集合中

 

• • 若是元素節點有 id 或 name  屬性，那麼 HTMLCollection  實例上面，
    • 能夠使用 id 屬性或 name 屬性引用該節點元素。
    • 若是沒有對應的節點，則返回null

    • // HTML 代碼以下
      // <img id="pic" src="http://example.com/foo.jpg">
      
      var pic = document.getElementById('pic');
      document.images.pic === pic    // true

       

• HTMLCollection.prototype.length
  • 返回 HTMLCollection 實例包含的成員數量

    document.links.length    // 18

 

• HTMLCollection.prototype.item()
  • item() 方法接受一個整數值做爲參數，表示成員的位置，返回該位置上的成員。
  • 因爲方括號運算符也具備一樣做用，並且使用更方便，因此通常狀況下，老是使用方括號運算符
  • 若是參數值超出成員數量或者不合法（好比小於0），那麼 item() 方法返回 null

    • var c = document.images;
      var img0 = c.item(0);
      
      var img0 = c[0];    // 更經常使用 [ ]

 

• HTMLCollection.prototype.namedItem()
  • 參數是一個字符串，表示 id 屬性或 name 屬性的值，返回對應的元素節點。
  • 若是沒有對應的節點，則返回null

    • // HTML 代碼以下
      // <img id="pic" src="http://example.com/foo.jpg">
      
      var pic = document.getElementById('pic');
      document.images.namedItem('pic') === pic    // true