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

Question

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

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. 这意味着它们应该具有keys、values和entries迭代@@iterator方法。所以添加它们。模块 web.dom.iterable：

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

如您所见，该列表不包括HTMLCollection. 为了能够使用 for-of 循​​环HTMLCollection，您必须手动分配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对象。