如何在Javascript中将DOM节点列表转换为数组？

javascript dom html

2022-08-30 04:59:21

我有一个Javascript函数，它接受HTML节点列表，但它需要一个Javascript数组（它运行一些Array方法），我想给它提供返回DOM节点列表的输出。Document.getElementsByTagName

最初我想使用简单的东西，比如：

Array.prototype.slice.call(list,0)

这在所有浏览器中都工作正常，当然除了Internet Explorer返回错误“JScript对象预期”，因为显然方法返回的DOM节点列表不是JScript对象，不足以成为函数调用的目标。Document.getElement*

注意事项：我不介意编写Internet Explorer特定的代码，但我不允许使用任何Javascript库，例如JQuery，因为我正在编写一个要嵌入到第三方网站中的小部件，并且我无法加载会为客户端创建冲突的外部库。

我最后的尝试是迭代DOM节点列表并自己创建一个数组，但是有没有更好的方法来做到这一点？

答案 1

在 es6 中，您可以按如下方式使用：

点差运算符
```
 var elements = [... nodelist]
```
用Array.from
```
 var elements = Array.from(nodelist)
```

答案 2

NodeList 是宿主对象，在宿主对象上使用 Array.prototype.slice 方法不能保证工作，ECMAScript 规范指出：

切片函数是否可以成功应用于宿主对象取决于实现。

我建议您创建一个简单的函数来循环访问，并将每个现有元素添加到数组中：NodeList

function toArray(obj) {
  var array = [];
  // iterate backwards ensuring that length is an UInt32
  for (var i = obj.length >>> 0; i--;) { 
    array[i] = obj[i];
  }
  return array;
}

更新：

正如其他答案所建议的那样，您现在可以在现代环境中使用传播语法或方法：Array.from

const array = [ ...nodeList ] // or Array.from(nodeList)

但是仔细想想，我想将NodeList转换为数组的最常见用例是迭代它，现在对象本身具有forEach方法，因此，如果您在现代环境中，则可以直接使用它，或者进行 pollyfill。NodeList.prototype