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

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

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

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

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

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

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

ECMAScript规范指出，NodeList是主机对象，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机方法，因此，如果您在现代环境中，则可以直接使用它，也可以使用一个粉尘。

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

• 点差运算符

   var elements = [... nodelist]

• 使用 Array.from

   var elements = Array.from(nodelist)

有关更多参考，请参见https://developer.mozilla.org/zh-CN/docs/Web/API/NodeList

使用点差（ES2015），就像：[...document.querySelectorAll('p')]

（可选：使用Babel将上述ES6代码转换为ES5语法）

在浏览器的控制台中尝试一下，看看魔术：

for( links of [...document.links] )
  console.log(links);

使用这个简单的把戏

<Your array> = [].map.call(<Your dom array>, function(el) {
    return el;
})

尽管它并不是真正的垫片，但由于没有规范要求使用DOM元素，因此我专门为您提供了一种使用slice()方式：https : //gist.github.com/brettz9/6093105

更新：当我使用DOM4规范的编辑器提出此问题时（询问它们是否可能对宿主对象添加自己的限制（以便该规范在与数组方法一起使用时要求实现者正确地转换这些对象））超出了ECMAScript规范，允许实现独立性），他回答说：“根据ES6 / IDL，主机对象已过时。” 我在http://www.w3.org/TR/WebIDL/#es-array上看到规范可以使用此IDL定义“平台数组对象”，但http://www.w3.org/TR/domcore/却没有似乎并没有为此使用新的IDL HTMLCollection（尽管它似乎只是这样做了，Element.attributes尽管它只是明确地声明将WebIDL用于DOMString和DOMTimeStamp）。我看到了[ArrayClass]（继承自Array.prototype）用于NodeList（NamedNodeMap现在不推荐使用，而只支持仍在使用它的唯一项Element.attributes）。无论如何，看起来它已经成为标准。Array.from对于此类转换，ES6 也可能比必须指定Array.prototype.slice且在语义上比[].slice()（Array.slice()据我所知，较短的形式（“数组通用”）尚未成为标准行为）更方便。

今天，在2018年，我们可以使用ECMAScript 2015（第6版）或ES6，但并非所有浏览器都可以理解（例如，IE不能完全理解）。如果你愿意，你可以使用ES6如下： var array = [... NodeList];（为传播运营商）或var array = Array.from(NodeList);。

在其他情况下（如果您不能使用ES6），可以使用最短的方法将a转换NodeList为Array：

var array = [].slice.call(NodeList, 0);。

例如：

var nodeList = document.querySelectorAll('input');
//we use "{}.toString.call(Object).slice(8, -1)" to find the class name of object
console.log({}.toString.call(nodeList).slice(8, -1)); //NodeList

var array = [].slice.call(nodeList, 0);
console.log({}.toString.call(array).slice(8, -1)); //Array

var result = array.filter(function(item){return item.value.length > 5});

for(var i in result)
  console.log(result[i].value); //credit, confidence

<input type="text" value="trust"><br><br>
<input type="text" value="credit"><br><br>
<input type="text" value="confidence">

但是，如果您只想DOM轻松遍历节点列表，则无需将a转换NodeList为Array。可以循环NodeList使用的项目：

var nodeList = document.querySelectorAll('input');
// Calling nodeList.item(i) isn't necessary in JavaScript
for(var i = 0; i < nodeList.length; i++)
    console.log(nodeList[i].value); //trust, credit, confidence

<input type="text" value="trust"><br><br>
<input type="text" value="credit"><br><br>
<input type="text" value="confidence">

不要试图使用for...in或for each...in枚举列表中的项目，因为这也会枚举的长度和项目属性，NodeList如果脚本假定它只需要处理元素对象，则会导致错误。另外，for..in不能保证以任何特定顺序访问属性。for...of循环将正确循环遍历NodeList对象。

另请参阅：

• NodeList文档

var arr = new Array();
var x= ... get your nodes;

for (i=0;i<x.length;i++)
{
  if (x.item(i).nodeType==1)
  {
    arr.push(x.item(i));
  }
}

这应该可以工作，跨浏览器，并获得所有“元素”节点。