使用for-of循环迭代HTMLCollection对象

Question

我正在使用babel-polyfill ，我正在尝试使用for-of循环迭代HTMLCollection对象：

const elements = document.getElementsByClassName('some-class')
for (const element of elements) {
  console.log(element)
}

它不起作用。 我收到错误elements[Symbol.iterator] is not a function 。 如何让它正常工作？

Answer 1

来自core-js GitHub页面上的“Iterable DOM collections” ：

某些DOM集合应该具有可迭代接口，或者应该从Array继承 。 这意味着他们应该有@@iterator keys ， values ， entries和@@iterator方法。 所以添加它们。 模块web.dom.iterable ：

 { NodeList, DOMTokenList, MediaList, StyleSheetList, CSSRuleList } #values() -> iterator #keys() -> iterator #entries() -> iterator #@@iterator() -> iterator (values) 

如您所见，该列表不包含HTMLCollection 。 为了能够使用HTMLCollection for-of循环，您必须手动将Array.prototype.values分配给HTMLCollection.prototype[Symbol.iterator] 。 看这个例子：

 HTMLCollection.prototype[Symbol.iterator] = Array.prototype.values for (const element of document.getElementsByTagName('a')) { console.log(element.href) } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js"></script> <a href="//www.google.com">Google</a> <a href="//www.github.com">GitHub</a> 

或者，您可以使用document.querySelectorAll() ，它返回一个NodeList对象。