像数组一样使用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万+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章