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

一尘不染

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

javascript

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

最初，我想到了使用简单的方法：

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

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

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

我最后的努力是遍历DOM节点列表并自己创建一个数组，但是有更好的方法吗？

阅读 601

2020-05-01

共1个答案

一尘不染

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

slice函数是否可以成功应用于主机对象取决于实现。

我建议您做一个简单的函数来遍历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转换为Array的最常见用例是对其进行迭代，现在该NodeList.prototype对象具有本forEach机方法，因此，如果您在现代环境中，则可以直接使用它，也可以使用一个民意测验。

2020-05-01