Итерация объекта HTMLCollection с использованием цикла for

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

Из "Итерируемых коллекций DOM" на странице core-js GitHub:

Некоторые коллекции 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 loop с 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 объект.