概要:このチュートリアルでは、JavaScriptのgetElementsByName()
メソッドを使って、ドキュメント内の指定された名前の要素を取得する方法を学びます。
Introduction to JavaScript getElementsByName()メソッド
HTMLドキュメント上のすべての要素は、name
属性を持つことができます。
Code language: HTML, XML (xml)<input type="radio" name="language" value="JavaScript">
id
属性とは異なり、複数のHTML要素でvalue
name
属性を共有することができます。
Code language: HTML, XML (xml)<input type="radio" name="language" value="JavaScript"><input type="radio" name="language" value="TypeScript">
指定した名前の要素をすべて取得するには、getElementsByName()
document
メソッドを使用します。
Code language: JavaScript (javascript)let elements = document.getElementsByName(name);
getElementsByName()
name
document
name
NodeList
を返します。
返された要素の集まりはライブです。
JavaScript getElementsByName()の例
次の例では、同じ名前(rate
)を持つラジオボタンのリストを表示しています。
Rateボタンをクリックすると、ページにはアラートダイアログが表示され、Very Poor
Poor
OK
Good
Very Good
などの評価が表示されます。
Code language: HTML, XML (xml)<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>JavaScript getElementsByName Demo</title></head><body> <p>Please rate the service:</p> <p> <input type="radio" name="rate" value="Very poor"> Very poor <input type="radio" name="rate" value="Poor"> Poor <input type="radio" name="rate" value="OK"> OK <input type="radio" name="rate" value="Good"> Good <input type="radio" name="rate" value="Very Good"> Very Good </p> <p> <button>Submit</button> </p> <script> let btn = document.getElementById('btnRate'); btn.addEventListener('click', () => { let rates = document.getElementsByName('rate'); rates.forEach((rate) => { if (rate.checked) { alert(`You rated: ${rate.value}`); } }) }); </script></body></html>
動作説明:
- まず、
btnRate
のidでRateボタンを選択します(getElementById()
方式)。 - 2番目に、クリックイベントをRateボタンにフックして、ボタンがクリックされたときに匿名関数が実行されるようにします。
- 第 3 に、
getElementsByName()
click
rate
であるすべてのラジオ ボタンを選択します。 - 最後に、ラジオ ボタンを繰り返し処理します。
click
のようなイベントについては、後で学ぶことになることに注意してください。
Summary
getElementsByName()
NodeList
を返します。-
NodeList
は配列のようなオブジェクトで、配列オブジェクトではありません。
- Was this tutorial helpful ?
- YesNo