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

要素を一括で取得してforeachで取得しようとしたらHTMLコレクションをループ処理ができなかった。
HTMLコレクションをforeachでループさせる方法の備忘録。

原因：HTMLコレクションは配列じゃない

HTMLCollectionは配列っぽいオブジェクトだが、配列じゃないためforEachでループ処理がかけられない。
なので、配列にする必要性がある。

解決方法：HTMLコレクションを配列にしてループさせる方法

HTMLCollectionを配列にするには二つ方法がある。

• Array.from()メソッド
• ...というスプレッド構文

実際に使うとこう以下のように使う。

<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を使ったループ処理。

おまけ：NodeListはforEach()でそのまま取得可能

NodeListはHTMLCollectionと違いforEachでそのまま取得可能。

var nl = document.querySelectorAll("要素");// NodeList
nl.forEach(elm => {
	console.log(elm);// 全部出力
});