web関連

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

HTMLCollectionと同じく配列のようなオブジェクトであるNodeListがあるが、NodeListはforEachでループ処理可能

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

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

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

Leave a Comment

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

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

CAPTCHA