JavaScript中的NodeList對象

Question

任何人都可以告訴我NodeList是什麼類型的對象。我讀到它是一個類似數組的對象，可以通過括號表示來訪問它，例如var a = someNode.childNode[0];。這是如何實現的，因爲通過括號表示法，我們只能訪問對象的屬性，而且我知道我們不能有

Answer 1

NodeLists「live」，即當文檔結構發生變化時它們被更新，他們始終保持最新的最準確的信息。實際上，所有的NodeList對象都是在DOM訪問時針對DOM運行的查詢。

要遍歷一個節點列表任何時候，這是最好的初始化第二個變量與長度，然後迭代器比較變量：

var divs = document.getElementsByTagName("div"); 

for (var i=0, lens=divs.length; i < len; i++){ 
    var div = document.createElement("div"); 
    document.body.appendChild(div); 
} 

節點列表就像是結構的數組，但它實際上不是數組。您可以通過括號表示法訪問數組值。

Answer 2

NodeList不是一個核心的Javascript對象，它是由瀏覽器提供的DOM。考慮一個將接口返回給動態對象或活動對象的函數，因此forEach（）不可用，但可以將其轉換爲真實數組，以使用例如

// turns nodelist into an array to enable forEach 
function toArray(list) { 
    var i, array = []; 
    for (i=0; i<list.length;i++) {array[i] = list[i];} 
    return array; 
} 

詳情：http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-536297177

Answer 3

NodeList是宿主對象和不受適用於本地JavaScript對象的一般規則。因此，您應該堅持爲其編寫的API，其中包含一個length屬性，並通過方括號屬性訪問語法訪問其成員。您可以使用此API來創建一個包含Array節點列表成員的快照：

var nodeList = document.getElementsByTagName("div"); 
var nodeArray = []; 
for (var i = 0; i < nodeList.length; ++i) { 
    nodeArray[i] = nodeList[i]; 
} 

Answer 4

JavaScript是像酒精，它可以迫使：

var links = document.getElementsByTagName('a'); 
Array.prototype.slice.call(links).forEach(function(anchor, index, arr) { 
    anchor.addEventListener('click', onClickFN, false); 
}); 

Answer 5

一個NodeList是DOM elements集合。它就像一個數組（但它不是）。要使用它，你必須把它變成一個常規的JavaScript數組。以下代碼片段可以爲您完成工作。

const nodeList = document.getElementsByClassName('.yourClass'), 
     nodeArray = [].slice.call(nodeList); 

Answer 6

節點列表通常作爲帶有過濾器的節點迭代器實現。這意味着獲得像長度一樣的屬性是O(n)，並且通過重新檢查長度將在O（n^2）上遍歷列表。

var paragraphs = document.getElementsByTagName('p'); 
for (var i = 0; i < paragraphs.length; i++) { 
    doSomething(paragraphs[i]); 
} 

這是更好地做到這一點，而不是：

var paragraphs = document.getElementsByTagName('p'); 
for (var i = 0, paragraph; paragraph = paragraphs[i]; i++) { 
    doSomething(paragraph); 
} 

這對所有集合和數組，只要數組不包含被視爲布爾假的東西效果很好。

在迭代childNodes的情況下，您也可以使用firstChild和nextSibling屬性。現在

var parentNode = document.getElementById('foo'); 
for (var child = parentNode.firstChild; child; child = child.nextSibling) { 
    doSomething(child); 
} 

Answer 7

在ES2015，您可以利用它創建的任何類似數組的對象Array實例Array.from方法，所以這應該工作：

const divList = Array.from(document.getElementsByTagName("div")); 

欲瞭解更多信息：https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/from