お前のすべてが欲しい...
**結論を知りたい人はスプレッド構文を使う**へ
HTML内の特定の要素をすべて取得したいというときは document.querySelectorAll を使うと便利です。
.item というクラスをすべて取得したいとき
<ul>
<li class="item">item1</li>
<li class="item">item2</li>
<li class="item">item3</li>
</ul>
const items = document.querySelectorAll('.item');
と、このように簡単にすべての要素が取得できるのです。めでたしめでたし。
・・・が、ひとつ注意点！！
返り値は NodeList
さてこの配列？を操作しようと思ったらここに落とし穴があるのです。返り値は Array ではなく NodeList 。そう、配列ではありません。
NodeList を操作するには
forEach() メソッドを使うのが便利です。
const items = document.querySelectorAll('.item');
items.forEach((item) => {
console.log(item);
});
だけど配列（Array） にしたい時があるかと思います。
NodeListを配列に変換するには
によると
NodeList は Array とは異なりますが、 forEach() メソッドで処理を反復適用することは可能です。 Array.from() を使うことで Array に変換することができます。
なるほど。 Array.from()メソッド を使えば配列に変換することができるようです。
const items = document.querySelectorAll('.item');
const itemsArray = Array.from(items);
一気に操作したい場合は、
Array.from(document.querySelectorAll('.item'), item => {
console.log(item);
});
もっと簡単に配列に変換したい
Array.from()メソッドで配列に変換できることはわかりました。ですが、もうちょっと簡単に配列に変換する方法があります。
スプレッド構文を使う
const items = [...document.querySelectorAll('.item')];
なんということでしょう、[]と.だけで配列に変換できました。
関数化
const nodeListToArray = nodeList => [...nodeList];
nodeListToArray(document.childNodes); // [ <!DOCTYPE html>, html ]
スプレッド構文とは
スプレッド構文を使うと、関数呼び出しでは 0 個以上の引数として、Array リテラルでは 0 個以上の要素として、Object リテラルでは 0 個以上の key-value のペアとして、Array や String などの iterable オブジェクトをその場で展開します。
配列に転換したい場合は、配列の中に iterable なオブジェクトを入れてあげればよいのです簡単ですね。
スプレッド構文の注意点
また、こんなこともMDNのページには書いてありました。
###大量の値を展開する場合セクション
JavaScript エンジンには、引数の個数に上限があります。関数呼び出しでのスプレッド構文では、引数の個数がその上限を超えてしまう可能性に留意してください。詳細は apply()のページを参照してください。
引数に上限があるようなので注意しましょう。
スプレッド構文のブラウザー実装状況
IEでは動きません・・・
適宜トランスパイルをしましょう。
参考
Document.querySelectorAll() | MDN
Array.from() | MDN
NodeList | MDN
スプレッド構文 | MDN
Converting a NodeList to an array with vanilla JavaScript
querySelectorAllで帰ってきたNodeListを外部ライブラリを使わずにforEachしたい
nodeListToArray - 30 seconds of code