3

私はbabel-polyfillHTMLCollectionを使用しており、for-ofループを使用してオブジェクトを反復しようとしています:

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

動いていない。エラーが発生しますelements[Symbol.iterator] is not a function。正しく動作させるには？

4

1 に答える 1

4

core-js GitHub ページの「反復可能な DOM コレクション」から:

一部の 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

于 2016-09-29T22:32:38.553 に答える