web関連

【javascript】HTMLコレクションのループ方法

2021/03/25

要素を一括で取得して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);// 全部出力
});

Leave a Comment

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。