要素を一括で取得してforeachで取得しようとしたらHTMLコレクションってループできないみたいね
だからHTMLコレクションを配列に変換する方法の備忘録
HTMLコレクションとは
配列っぽいオブジェクトなんだけど配列じゃないからforEach
でループが回せない謎オブジェクト
なので、forEach
で回せるように配列にする必要性がある
HTMLCollectionを配列にする方法
HTMLCollectionを配列にするには二つ方法がある
・Array.from()
メソッド
・...
というスプレッド構文
実際に使うとこう(↓h2要素を取得することが目的のソースコード)
<h2>テスト01</h2>
<h2>テスト02</h2>
<h2>テスト03</h2>
<script>
var hc = document.getElementsByTagName('h2');// HTMLCollection
console.log(Array.from(hc));// Array → (3) [h2, h2, h2]
console.log([...hc]);// Array → (3) [h2, h2, h2]
</script>
で、forEach
を使おうとするなら
<h2>テスト01</h2>
<h2>テスト02</h2>
<h2>テスト03</h2>
<script>
var hc = document.getElementsByTagName('h2');// HTMLCollection
// ↓どっちか
var hcArray = Array.from(hc);
var hcArray = [...hc];
hcArray.forEach(elm => {
console.log(elm);// 全部出力
});
</script>
これでHTMLCollectionでもforEach
を使うことができる
HTMLCollectionと同じく配列のようなオブジェクトであるNodeListだけど、NodeListだとforEachをそのまま使えるみたい
NodeListはforEach()で取得可能
前回、要素を追加する際の比較で使ったNodeListなんだけど
NodeListは配列に変換しなくてもforEach
が使えるみたいね
var nl = document.querySelectorAll("要素");// NodeList
nl.forEach(elm => {
console.log(elm);// 全部出力
});
Memo:前回の違いについて調べた備忘録