JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

【JavaScript】NodeList（ノードリスト）を配列に変換する方法をわかりやすく解説

JavaScriptでdocument.querySelectorAll()などのDOM操作メソッドを使うと、戻り値として「NodeList（ノードリスト）」と呼ばれるノードのコレクションが返されます。NodeListは配列に似ていますが、map()やfilter()などArrayオブジェクトが持つ便利なメソッドの多くを使用できません。そこで実践では、NodeListを本物の配列に変換してから操作するのが一般的です。

NodeListを配列に変換する主な方法

1. Array.from() を使う

最もシンプルで広く使われている方法です。NodeListを渡すと、それをもとにした新しい配列を生成してくれます。

const nodes = document.querySelectorAll('.sample');
const arr = Array.from(nodes);

2. スプレッド構文（...）を使う

ES2015以降で利用できる記法で、より簡潔に書けるのが特徴です。

const nodes = document.querySelectorAll('.sample');
const arr = [...nodes];

実装例：NodeListを配列に変換して要素の色を一括変更する

以下は、クラス名「sample」を持つ複数のdiv要素をNodeListとして取得し、Array.from()で配列に変換したうえで、ボタンをクリックするとすべての背景色が赤に変わるサンプルコードです。

コード例

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .sample {
        display: inline-block;
        font-size: 20px;
        font-weight: 500;
        color: white;
        background-color: blue;
        padding:10px;
        width: 100px;
        height: 100px;
    }
</style>
</head>
<body>
<h1>ノードリストを配列に変換する</h1>
<div class="sample">1</div>
<div class="sample">2</div>
<div class="sample">3</div>
<div class="sample">4</div>
<br>
<button class="Btn">ここをクリック</button>
<h3>上のボタンをクリックすると、すべてのdiv要素の色が変わります</h3>
<script>
    let sampEle = document.querySelectorAll('.sample');
    let BtnEle = document.querySelector('.Btn');
    BtnEle.addEventListener('click',()=>{
        Array.from(sampEle).forEach(item=>{
            item.style.backgroundColor = 'red';
        })
    })
</script>
</body>
</html>

実行結果

初期表示時の画面は以下のとおりです。

【JavaScript】NodeList（ノードリスト）を配列に変換する方法をわかりやすく解説

「ここをクリック」ボタンを押すと、配列に変換された各要素に対してforEach()が実行され、すべてのdiv要素の背景色が赤に変更されます。

【JavaScript】NodeList（ノードリスト）を配列に変換する方法をわかりやすく解説

まとめ

NodeListを配列に変換すれば、map()・filter()・reduce()など配列の豊富なメソッドを自由に活用できます。変換方法としてはArray.from()かスプレッド構文のどちらでも問題ないので、プロジェクトのコーディング規約や好みに合わせて選択しましょう。

  1. JavaScriptで配列をセット（Set）に変換する方法｜new Set()の使い方を解説

    JavaScriptでは、new Set() コンストラクタを使うことで、配列を簡単にセット（Setオブジェクト）へ変換できます。セットは同じ値を自動的に1つだけ保持する性質を持つため、配列から重複した要素を取り除きたい場合にも非常に便利です。 配列をセットに変換するサンプルコード 以下は、ボタンをクリックすると配列がセットに変換されて表示される、完全なHTMLサンプルです。 <!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8 /> <meta name=viewport co

  2. JavaScriptで辞書（連想配列）をオブジェクトのリストに変換する方法

    JavaScriptでは、キーと値のペアを持つ「辞書」のようなオブジェクトを、Object.values()メソッドを使うことで簡単にオブジェクトの配列（リスト）へ変換できます。以下に具体的なサンプルコードを示します。 サンプルコード <!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-width, initial-scale=1.0 /> <title>Document&