実践例で学ぶ JavaScript getElementsByName()

概要: このチュートリアルでは、JavaScript の getElementsByName() メソッドを使用して、ドキュメント内で指定された名前を持つ要素を取得する方法を学びます。

JavaScript getElementsByName() メソッド入門

HTML ドキュメントのすべての要素は、name 属性を持つことができます。

<input type="radio" name="language" value="JavaScript">Code language: HTML, XML (xml)

id 属性とは異なり、複数の HTML 要素が name 属性の同じ値を共有できます。

<input type="radio" name="language" value="JavaScript">
<input type="radio" name="language" value="TypeScript">Code language: HTML, XML (xml)

指定された名前を持つすべての要素を取得するには、document オブジェクトの getElementsByName() メソッドを使用します。

let elements = document.getElementsByName(name);Code language: JavaScript (javascript)

getElementsByName() は、要素の name 属性の値である name を引数として受け取り、要素のライブ NodeList を返します。

返される要素のコレクションはライブです。つまり、同じ名前の要素がドキュメントに挿入または削除されると、返される要素は自動的に更新されます。

JavaScript getElementsByName() の例

次の例は、同じ名前 (rate) を持つラジオボタンで構成されるラジオグループを示しています。

ラジオボタンを選択して送信ボタンをクリックすると、ページには 非常に悪い、悪い、普通、良い、非常に良い などの選択された値が表示されます。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>JavaScript getElementsByName Demo</title>
</head>

<body>
    <p>Please rate the service:</p>
    <p>
        <label for="very-poor">
            <input type="radio" name="rate" value="Very poor" id="very-poor"> Very poor
        </label>
        <label for="poor">
            <input type="radio" name="rate" value="Poor" id="poor"> Poor
        </label>
        <label for="ok">
            <input type="radio" name="rate" value="OK" id="ok"> OK
        </label>
        <label for="good">
            <input type="radio" name="rate" value="Good"> Good
        </label>
        <label for="very-good">
            <input type="radio" name="rate" value="Very Good" id="very-good"> Very Good
        </label>
    </p>
    <p>
        <button id="btnRate">Submit</button>
    </p>
    <p id="output"></p>
    <script>
        let btn = document.getElementById('btnRate');
        let output = document.getElementById('output');

        btn.addEventListener('click', () => {
            let rates = document.getElementsByName('rate');
            rates.forEach((rate) => {
                if (rate.checked) {
                    output.innerText = `You selected: ${rate.value}`;
                }
            });

        });
    </script>
</body>

</html>Code language: HTML, XML (xml)

仕組み

まず、getElementById() メソッドを使用して、ID btnRate で送信ボタンを選択します。
次に、送信ボタンのクリックイベントをリッスンします。
3 番目に、getElementsByName() を使用してすべてのラジオボタンを取得し、選択された値を出力要素に表示します。

click のようなイベントについては後で学習します。ここでは、getElementsByName() メソッドに焦点を当てる必要があります。

まとめ

getElementsByName() は、指定された名前を持つ要素のライブ NodeList を返します。
NodeList は、配列オブジェクトではなく、配列のようなオブジェクトです。

クイズ

このチュートリアルは役に立ちましたか？