像數組一樣使用NodeList:一個對象組合的有效用法

場景

我是用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)

我們的節點仍然是節點列表,和它獲取我們需要而不修改其原型這些陣列特徵。

我沒有看到此解決方案在任何地方發表過,也有可能,因爲它是永遠不會想要的東西。

所以問,如何做NodeList成爲數組,問如何能得到 NodeList 像數組,

而答案可能會 ‘Object Composition

發佈了75 篇原創文章 · 獲贊 61 · 訪問量 25萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章