【JS】HTMLCollectionをループ処理可能にする
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を動的に取得」とかで使えそうですがちょっといい案が思いつかないですね
[... 'じゃあな!']
PREV
2019-04-17
【Python】【JS】Pythonのスター演算子とJSのスプレッド演算子でクールに配列追加
NEXT
2019-04-23
【JS】CSS変数の全ての値を取得しJSオブジェクトに変換-1
LINK
リンク
Twitter
GitHub
TAGS
タグ
LATESTS
最新の記事
POPULAR
人気の記事
- CSS2021/04/29【CSS】右寄せの方法は結局flexが一番良さそう
- React2020/07/13【JS】Reactのstyleの使い方、書き方いろいろ
- Payment2021/10/16GooglePayでVisaタッチを使う時に知っておきたい過酷な現実【追記あり】
- Others2021/07/11Slackに予約投稿機能ができて嬉しいけどそれでもまだ少し不満な理由【追記あり】
- CSS2020/04/30【CSS】tailwind.cssでよく使うデザインパターン
- CSS2019/03/30【CSS】100vhは「一画面」ではないという罠
- CSS2020/06/09【CSS】max-font-sizeやmin-font-sizeを使いたくなったら
- Vue2019/06/29【JS】Vueの:classの書き方3通り
- JavaScript2020/09/02【JS】yarnの長所とyarnからnpmに戻ってきた理由
- React2020/06/04【JS】ReactのclassNameの色々な書き方紹介