場景
我是用querySelectorAll()查詢了一些標記,並收到了一個NodeList響應。
問題
節點列表類似於數組。(比如:他們都有一個長度屬性,它們都在括號中的索引訪問它們的屬性或者子元素:NodeList[0])嘗試使用.map,.filter或者.forEach中的任意一個方法。
方法
各不相同的選項。從循環遍歷到數組填充還可以使用更簡單的es6方法:
var elements = [... nodelist]
var elements = Array.from(nodelist)
然而,它們都有問題…它們工作的太好了。你現在有了一個數組,而不是節點列表。(現在已經不是一個NodeList了)。當然,它有來自NodeList的所有數據,但它不再被識別爲NodeList。
有什麼問題嗎?
Try:
nodeElementInTheArray.compareDocumentPosition(anotherNodeElementInTheArray)
這將出錯,因爲參數不是一個真正的NodeListItem。
讓我們重新構建我們的需求
我們不需要我們的NodeList來做一個數組,我們只需要數組的屬性。這是一個完美的對象組合的地方。
解決辦法
Object.assign(*NODELIST*, Object.Array)