有时候，即使你以正确的方式写了代码，但它仍然不能正常工作。

var allbuttons = document.getElementsByTagName("button");
console.log(allbuttons);

var copyAllButtons = [];
for (let i = 0; i < allbuttons.length; i++) {
  copyAllButtons.push(allbuttons[i]);
}
console.log(copyAllButtons);

你得到一个空数组。 喜欢,这

HTMLCollection []
[]

Console_javascript

为了解决这个问题，你必须在html文件的body标签后添加javascript文件的链接。

<script src="./script.js"></script>

如下图所示， html_file

最终输出

HTMLCollection(6) [button.btn.btn-dark.click-me, button.btn.btn-dark.reset, button#b, button#b, button#b, button#b, b: button#b]
(6) [button.btn.btn-dark.click-me, button.btn.btn-dark.reset, button#b, button#b, button#b, button#b]

我看到了一个更简洁的获取Array的方法。原型方法一般来说也很有效。将HTMLCollection对象转换为Array对象的演示如下:

[].slice.call( yourHTMLCollectionObject );

而且，正如评论中提到的，对于老式浏览器，比如IE7和更早的版本，你只需要使用兼容性函数就可以了，比如:

function toArray(x) {
    for(var i = 0, a = []; i < x.length; i++)
        a.push(x[i]);

    return a
}

我知道这是一个老问题，但我觉得公认的答案有点不完整;所以我想先把这个扔出去。

有时候，即使你以正确的方式写了代码，但它仍然不能正常工作。

var allbuttons = document.getElementsByTagName("button");
console.log(allbuttons);

var copyAllButtons = [];
for (let i = 0; i < allbuttons.length; i++) {
  copyAllButtons.push(allbuttons[i]);
}
console.log(copyAllButtons);

你得到一个空数组。 喜欢,这

HTMLCollection []
[]

Console_javascript

为了解决这个问题，你必须在html文件的body标签后添加javascript文件的链接。

<script src="./script.js"></script>

如下图所示， html_file

最终输出

HTMLCollection(6) [button.btn.btn-dark.click-me, button.btn.btn-dark.reset, button#b, button#b, button#b, button#b, b: button#b]
(6) [button.btn.btn-dark.click-me, button.btn.btn-dark.reset, button#b, button#b, button#b, button#b]

对于跨浏览器的实现，我建议你看看prototype.js $ a函数

从1.6.1复制:

function $A(iterable) {
  if (!iterable) return [];
  if ('toArray' in Object(iterable)) return iterable.toArray();
  var length = iterable.length || 0, results = new Array(length);
  while (length--) results[length] = iterable[length];
  return results;
}

它没有使用Array.prototype.slice，可能是因为它不是在每个浏览器上都可用。我担心性能是相当糟糕的，因为有一个回落是一个javascript循环迭代。

var arr = Array.prototype.slice.call( htmlCollection )

将有相同的效果使用“本机”代码。

Edit

由于这得到了很多人的观看，请注意(根据@oriol的评论)下面更简洁的表达式是等效的:

var arr = [].slice.call(htmlCollection);

但是请注意@JussiR的评论，与“verbose”表单不同，它确实在进程中创建了一个空的、未使用的、实际上不可用的数组实例。编译器对此的处理超出了程序员的理解范围。

Edit

从ECMAScript 2015 (ES 6)开始，还有Array.from:

var arr = Array.from(htmlCollection);

Edit

ECMAScript 2015还提供了展开运算符，它在功能上等价于Array.from(不过请注意，Array.from支持将映射函数作为第二个参数)。

var arr = [...htmlCollection];

我已经确认以上两个都可以在NodeList上工作。

上述方法的性能比较:http://jsben.ch/h2IFA

不确定这是否是最有效的，但简洁的ES6语法可能是:

let arry = [...htmlCollection] 

编辑:另一个，来自Chris_F评论:

let arry = Array.from(htmlCollection)