如何在 Javascript 中将 DOM 节点列表转换为数组? [英] How to convert a DOM node list to an array in Javascript?

问题描述

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

I have a Javascript function that accepts a list of HTML nodes, but it expects a Javascript array (it runs some Array methods on that) and I want to feed it the output of Document.getElementsByTagName that returns a DOM node list.

最初我想使用一些简单的东西，例如:

Initially I thought of using something simple like:

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

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

And that works fine in all browsers, except of course Internet Explorer which returns the error "JScript object expected", as apparently the DOM node list returned by Document.getElement* methods is not a JScript object enough to be the target of a function call.

警告:我不介意编写特定于 Internet Explorer 的代码，但我不允许使用任何 Javascript 库，例如 JQuery，因为我正在编写要嵌入到 3rd 方网站的小部件，并且我无法加载外部库会给客户端造成冲突.

Caveats: I don't mind writing Internet Explorer specific code, but I'm not allowed to use any Javascript libraries such as JQuery because I'm writing a widget to be embedded into 3rd party web site, and I cannot load external libraries that will create conflict for the clients.

我最后的努力是遍历 DOM 节点列表并自己创建一个数组，但有没有更好的方法来做到这一点?

My last ditch effort is to iterate over the DOM node list and create an array myself, but is there a nicer way to do that?

推荐答案

NodeList 是 宿主对象，使用Array.prototype.slice<宿主对象上的/code> 方法不能保证工作，ECMAScript 规范指出:

NodeLists are host objects, using the Array.prototype.slice method on host objects is not guaranteed to work, the ECMAScript Specification states:

切片函数能否成功应用于宿主对象取决于实现.

Whether the slice function can be applied successfully to a host object is implementation-dependent.

我建议您创建一个简单的函数来迭代 NodeList 并添加每个现有元素到数组:

I would recommend you to make a simple function to iterate over the NodeList and add each existing element to an array:

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 方法:

As other answers suggest, you can now can use in modern environments the spread syntax or the Array.from method:

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

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

But thinking about it, I guess the most common use case to convert a NodeList to an Array is to iterate over it, and now the NodeList.prototype object has the forEach method natively, so if you are on a modern environment you can use it directly, or have a pollyfill.

这篇关于如何在 Javascript 中将 DOM 节点列表转换为数组?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！