javascript - 如何确保获得可以在 forEach 上使用的 HTML 节点/元素的集合？

Question

所以我刚刚了解到我是否使用它会有所不同

document.querySelectorAll('selector')

或

document.getElementsByClassName('selector')

后者不能用 .forEach 进行迭代。这可能是因为后者返回一个类似数组的对象，而第一个返回一个节点列表。

现在我读到一些浏览器在使用时返回一个类似数组的对象document.querySelectorAll('选择器') https://www.w3schools.com/js/js_htmldom_nodelist.asp

我什至不确定这个问题是否适用于我，因为我使用的是基于 webpack 的框架，该框架使用 Babel7 将我的代码转换为 ES2015。但我想确保我的代码可以在尽可能多的浏览器上运行，因此最好知道是否有一个 JS 方法可以从 DOM 中检索元素来确保这一点。

顺便说一句，有人可以向我指出解释 JS 列表的文档吗？我找不到太多，只有有关数组的文档。列表只是 JS 中数组的别名吗？

Answer 1

querySelectorAll 返回 NodeList ，并且 getElementsByClassName 返回 HTMLCollection 。

最近的发展似乎是所有数组方法都添加到 NodeList 中，而 HTMLCollection 多年来没有改变，所以我尝试使用NodeList 因为它们是最新的，并提供 .forEach 和其他。

我会写:

 for(const el of document.querySelectorAll('.some-class'))
    //...

But I would like to make sure that my code works on as many browsers as possible, and therefore it would be nice to know if there is a JS method to retrieve elements from the DOM which makes sure of that

当然，无论您使用什么新功能，旧版浏览器都没有新功能。然而这不是你的问题，Webpack 会为你处理这个问题，只需确保添加必要的 polyfill。

And on a sidenote, could someone point me to the piece of documentation explaining lists in JS?

JS 中没有列表，只有一个创造的术语，称为类数组对象，它是包含数字键并且确实有 .length 的对象，但是它们不继承自Array。由于某种原因，NodeList 和 HTMLCollection 是此类数组对象。