Итерация объект HTMLCollection используя для петли-

Question

Я использую babel-polyfill и я пытаюсь перебирать в HTMLCollection объект, используя для-петли:

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

Это не работает. Я получаю сообщение об ошибке elements[Symbol.iterator] is not a function. Как заставить его работать правильно?

Answer 1

От "Iterable DOM collections" on the core-js GitHub page:

Некоторые коллекции DOM должны iterable interface или должны быть inherited from Array. Это означает, что они должны иметь keys, values, entries и @@iterator методы для итерации. Поэтому добавьте их. Модуль web.dom.iterable:

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

Как вы можете видеть, что список не включает в себя HTMLCollection. Чтобы иметь возможность использовать цикл for-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 объект.