HTMLCollection

HTMLCollection はhtmlに関するいろんなものの集合(Collection)です。配列みたいなものですね。

例えばたくさんのCSSファイル(stylesheet)を読み込んでいるページでCSSファイルがいくつあるかを確認したい場合だと↓のようになります。一般的な配列と同じ挙動ですね!

console.dir(document.styleSheets)
// CSSStyleSheet
// CSSStyleSheet
// CSSStyleSheet
// CSSStyleSheet

console.dir([0, 1, 2, 0])
// 0
// 1
// 2
// 0

HTMLCollectionはループできない

次に上と同じことをループ処理(forEach)で行ってみます。すると…

document.styleSheets
  .forEach(v => console.log(v))
  [
    // TypeError:
    // document.styleSheets.forEach is not a function

    (0, 1, 2, 0)
  ].forEach(v => console.log(v))
// 0
// 1
// 2
// 0

配列は問題なく動きます…が、HTMLCollectionはエラー。

これは文字列とかを無理矢理ループさせようとすると出るエラーと同じですね:(

'foo'.forEach(v => console.dir(v))
// TypeError:
// "foo".forEach is not a function

HTMLCollectionでループ処理を可能にする

これでok

;[...document.styleSheets].forEach(v => console.log(v))

// CSSStyleSheet
// CSSStyleSheet
// CSSStyleSheet
// CSSStyleSheet

スプレッド演算子(…)で一旦中身をバラバラにした後、再び配列([])にすることでループ処理が可能になります:)

ちなみに配列の場合でも同じことができるわ(今回の場合はあんまり意味ないけど)

;[...[0, 1, 2, 0]].forEach(v => console.log(v))
// 0
// 1
// 2
// 0

使いどころ

「全てのCSSを取得」とか「任意のセレクタのCSSを動的に取得」とかで使えそうですがちょっといい案が思いつかないですね

[… ‘じゃあな!’]