概要：このチュートリアルでは、JavaScriptのgetElementsByName()メソッドを使って、ドキュメント内の指定された名前の要素を取得する方法を学びます。
Introduction to JavaScript getElementsByName()メソッド
HTMLドキュメント上のすべての要素は、name属性を持つことができます。
Code language: HTML, XML (xml)<input type="radio" name="language" value="JavaScript">
id属性とは異なり、複数のHTML要素でvaluename属性を共有することができます。
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()namedocumentnameNodeListを返します。
返された要素の集まりはライブです。
JavaScript getElementsByName()の例
次の例では、同じ名前(rate)を持つラジオボタンのリストを表示しています。
Rateボタンをクリックすると、ページにはアラートダイアログが表示され、Very PoorPoorOKGoodVery 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()clickrateであるすべてのラジオ ボタンを選択します。 - 最後に、ラジオ ボタンを繰り返し処理します。
clickのようなイベントについては、後で学ぶことになることに注意してください。
Summary
getElementsByName()NodeListを返します。-
NodeListは配列のようなオブジェクトで、配列オブジェクトではありません。
- Was this tutorial helpful ?
- YesNo