Htmlの子要素を取得する

JavaScriptにおいて、HTMLElementの子要素を取得したいときがあるだろう

/**
 * @type {HTMLElement}
 */
document.querySelector(/* css query */);

つまりはこうすればいいのだが、

/**
 * @type {HTMLCollection}
 */
const elements = document.querySelector(/* css query */).children;
 
// ちなみにchildNodesを使用すると、普通のHTMLタグ要素以外にもテキスト要素も取得するようになる
/**
 * ＠type {NodeListOf<ChildNode>}
 */
document.querySelector(/* css query */).childNodes;

このHTMLCollectionというやつはひどく使いづらい。
indexelememts[0]か、名前elements.nameでプロパティを取得することぐらいしかできない

のでArrayに変換してしまえばArrayの強力なメソッド達が使用できるようになる。
具体的な方法と言えば

Array.from(elements);

こうだが、なんだか長ったらしいので、モダンな書き方”スプレッド構文”で書くとかっこいい
スプレッド構文とは : 配列や配列風オブジェクトやオブジェクトやイテレーターやジェネレーターなどを”展開”することができる

[...elements];

最終的な形はこうである

/**
 * @type {Array<Element>}
 */
[...document.querySelector(/* css query */).children]

(childrenは気持ちアップキャストされる(HTMLElement -> Element)のでまあそこんとこ気にするでもないけど覚えておいて損はなくもないけど別にどうでもいいということも本音としてあると思った)