像数组一样使用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’