【JavaScript・DOM操作】HTMLCollection型を配列にキャストしてforEachする方法

こんにちはフロントエンドエンジニアのまさにょんです！

今回は、JavaScriptでHTMLCollection型を配列にしてforEachする方法について解説していきます。

1 HTMLCollection型を配列にキャスト(型変換)してforEachする方法
2 JavaScript書籍 Ver. 中級-上級者向け
3 JavaScript書籍 Ver. 初級者向け
4 Twitterやってます！Follow Me！
5 参考・引用
6 最近の投稿

HTMLCollection型を配列にキャスト(型変換)してforEachする方法

HTMLコレクションとは？？？

配列にような構造のオブジェクトですが、配列じゃないのでforEachなどのArrayメソッドは使えません。

なので、forEachでループ処理をしたい場合は、配列にするキャスト(型変換)する必要があります

HTMLCollectionを配列にキャスト(型変換)する方法

HTMLCollectionを配列にするには、次の2つの方法があります。

Array.from()メソッド
スプレッド構文( [ … ])

実際にSampleCodeで確認していきましょう。

SampleCode

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTMLCollection to Array🔥</title>
</head>
<body>

    <h1 id="title">HTMLCollectionとは？ HTMLCollectionを配列にしてforEachする方法</h1>

    <h2>HTMLコレクションとは？？？</h2>

    <p>
        配列っぽいオブジェクトなんだけど配列じゃないからforEachでループが回せない謎オブジェクト
        <br>
        なので、forEachで回せるように配列にする必要性がある
    </p>

    <h2>HTMLCollectionを配列にする方法</h2>

    <p>
        HTMLCollectionを配列にするには二つ方法がある
        <br>
        1. Array.from()メソッド
        <br>
        2. 「 ... 」というスプレッド構文
    </p>
    

    <div class="robotama-project">
        <h2>document.querySelectorAll() で ロボ玉開発計画のProject-Listをすべて取得する🔥</h2>
        <ol>
            <li>ロボ玉試作1号機🔥</li>
            <li>ロボ玉試作2号機🔥</li>
            <li>ロボ玉試作3号機🔥</li>
        </ol>
    </div>
    

    <div>
        <h3>参考・引用</h3>
        
        <ol>
            <li>
                <a href="https://twotone.me/web/5087/" target="_blank">【javascript】HTMLコレクションのループ方法</a>
            </li>
            <li>
                <a href="https://chaika.hatenablog.com/entry/2019/09/09/083000" target="_blank">JavaScript NodeList, HTMLCollection は配列(Array)ではない</a>
            </li>
        </ol>
    </div>

    <script>

        // 1. document.querySelectorAll('Selector-名') => 指定-SelectorのHTMLElementをすべて取得する
        const robotamaProjectList = document.querySelector('div.robotama-project');
        console.log({robotamaProjectList});
        
        // 2. 実行結果(返り値)は、HTMLCollection
        const robotamaChildren = robotamaProjectList.children;

        console.log(robotamaChildren);
            // HTMLCollection(2) [h2, ol]
   
        console.log(Array.from(robotamaChildren));
            // [h2, ol]
            // [[Prototype]]

        console.log([...robotamaChildren]);
            // [h2, ol]
            // [[Prototype]]


        // 3. HTMLCollection to Array
        const ArrayList = [...robotamaChildren];

        console.log({ArrayList});

        ArrayList.forEach(robotamaElement => {
            // 処理を記述する
            console.log(robotamaElement);
        });
    
    </script>
</body>
</html>