HTMLCollectionを配列で扱いたいときはObject.valuesやArray.fromやスプレッド構文を使うと便利

最初に結論

たぶん、検索で引っかかってきた人は結論だけ知りたいはずなので、まずは結論だけ書く。

配列として扱うには Object.valuesを使うと想定したような使い方ができる。
(他にはArray.fromやスプレッド構文を使う方法もある。それらは本文に書いた)

Object.values(document.getElementsByTagName('section')).map(h => h.textContent)
// => textContentの配列が返る

以下、本文

HTMLCollectionは配列ではない

HTMLCollection という名前なのに、実は配列ではない HTMLCollection。

例えば下記のように扱える。

document.getElementsByTagName('section');
// => HTMLCollection(8)[ section.~~~

document.getElementsByTagName('section')[0].textContent
// テキストが出力される

そのため一見配列っぽく思えるが、下記のように扱うとエラーになる。

document.getElementsByTagName('section').map(h => h.textContent)

エラー内容。

Uncaught TypeError: document.getElementsByTagName(...).map is not a function

というわけで、配列ではないので一手間掛ける必要がある。

そこで Object.values を使う。

developer.mozilla.org

実際のコードは下記のようになる。

Object.values(document.getElementsByTagName('section')).map(h => h.textContent)
// => textContentの配列が返る

Object.values以外だと、Array.fromやスプレッド構文使うやり方も便利

似たような記事はたくさんインターネットにあったのだが、意外とこのやり方で書かれているものが見つからなかったので書き残した。

※ただ、この記事書き終えてから改めて検索してみたら Array.from 使うやつとかスプレッド構文使うやつを見つけた。
これらのやり方も気軽に使えて便利ですね。

// Array.from方式
Array.from(document.getElementsByTagName('section')).map(h => h.textContent)

// スプレッド構文方式
[...document.getElementsByTagName('section')].map(h => h.textContent)