如何在 Javascript 中遍历 HTMLCollection

Question

我正在使用：

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

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

如果我控制台日志链接，我会得到一个包含 100+ 个元素的 HTMLCollection。 如果我控制台 log 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

这对我有用

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

Answer 2

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

Answer 3

您还可以使用 EventListener

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

哦

Answer 4

差不多了： 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); })