如何在Javascript中迭代HTMLCollection

Question

我正在使用：

var links = document.getElementsByTagName('a');

获取页面上的所有链接。我们需要修改一些。

如果我控制日志链接，我得到一个100+元素的HTMLCollection。 如果我控制日志links.length，那就是0.

我已经尝试了所有我能找到的将其转换为数组但没有任何工作。

Array.from(links)

Array.prototype.slice.call(links)

[].forEach.call(links, function (el) {...});

HTMLCollection.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];

HTMLCollection.prototype.forEach = Array.prototype.forEach;

这些都会产生一个空数组。

此外var links = document.querySelectorAll('a');会产生一个空的NodeList。

我的选项已经用完了。初始链接变量非常不是空的。所以我不明白为什么所有这些建议的选项都不起作用。另外，jQuery不是我们的选择。

Answer 1

您也可以使用 EventListener

window.addEventListener('load', function () {
  var links = document.getElementsByTagName('a');
  console.log(links);
}

哦

Answer 2

几乎拥有它：var linksAsArray = Array.prototype.slice.call(links, 0)

另外，作为替代方案，您可以编写辅助函数以避免需要始终将节点列表转换为数组。例如，

function each(elems, fn){
  var i = -1;
  while(++i < elems.length){
    fn(elems[i])
  }
}

each(links, function(link){ console.log(link); })

Answer 3

这对我有用

var links = document.getElementsByTagName('a');
var result = [].slice.call(links)

Answer 4

Array.from(HTML_COLLECTION).forEach(function (element) {
  console.log(element);
});