さまざまな状況で、プログラマーは name 属性によって HTML 要素を取得する必要があります。開発者が、値を読み取ったり操作したりするために、ラジオ ボタンやチェックボックスなどのフォーム コントロールにアクセスしたいとします。より具体的には、「 名前 ” 属性は、関連するフォーム コントロールをグループ化するために使用され、同じ名前を多くのコントロールに提供して、単一のグループとしてアクセスできるようにすることができます。
この投稿では、JavaScript で HTML 要素を名前で取得する方法を説明します。
JavaScript で名前で要素を取得する方法は?
JavaScript では、次の事前定義された JavaScript メソッドを使用して、name 属性を使用して HTML 要素にアクセスできます。
-
- getElementsByName() メソッド
- querySelectorAll() メソッド
方法 1: 「getElementsByName()」メソッドを使用して名前で要素を取得する
HTML 要素を名前で取得するには、「 getElementsByName() ' 方法。このメソッドは、指定された name 属性を持つ要素のコレクションを提供します。
構文
getElementsByName() メソッドには次の構文が使用されます。
document.getElementsByName ( '名前' )
例
まず、6 つのボタンを作成します。そのうちの 5 つは「 名前 ” HTML 要素を取得するために使用される属性 “ ボタン 」。 「を呼び出す6番目のボタンでonclickイベントを添付します applyStyle() 」関数を使用して、5 つのボタンのスタイルを設定します。
< ボタン 名前 = 「ボタン」 > ボタン ボタン >< ボタン 名前 = 「ボタン」 > ボタン ボタン >
< ボタン 名前 = 「ボタン」 > ボタン ボタン >
< ボタン 名前 = 「ボタン」 > ボタン ボタン >
< ボタン 名前 = 「ボタン」 > ボタン ボタン > < br >< br >
< ボタン onclick = 「applyStyle()」 > ここをクリック ボタン >
関数を定義する」 applyStyle() ボタンをクリックするとトリガーされ、すべてのボタンの背景色が変更されます。これを行うには、まず、すべての「 ボタン 」要素をグループとして呼び出し、「 getElementsByName() ' 方法：
const btns = document.getElementsByName ( 「ボタン」 ) ;
btns.forEach ( ボタン = > {
btn.style.background = 「カデブルー」 ;
} ) ;
}
ボタンをクリックしたときの出力でわかるように、5 つのボタンの背景色が変更されます。
方法 2: 「querySelectorAll()」メソッドを使用して名前で要素を取得する
また、「 querySelectorAll() 」を使用して要素を取得するメソッド 名前 JavaScript の ” 属性。このメソッドは、CSS クラス、ID、名前などの指定されたセレクター/属性に一致するドキュメント内のすべての要素を取得するために使用されます。
構文
指定された構文は、「 querySelectorAll()」 方法：
document.querySelectorAll ( '[]' ) ;
例
次の例では、名前が「」のボタンのみの色を変更します。 ボタン1 」：
< 分周 >< ボタン名 = 「ボタン」 > ボタン ボタン >
< ボタン名 = 「btn1」 > ボタン ボタン >
< ボタン名 = 「ボタン」 > ボタン ボタン >
< ボタン名 = 「btn1」 > ボタン ボタン >
< ボタン名 = 「ボタン」 > ボタン ボタン > < br >< br >
< ボタン onclick = 「applyStyle()」 > ここをクリック ボタン >
分周 >
定義された関数では、名前が「 ボタン1 」そしてそれにスタイリングを適用します：
const btns = document.querySelectorAll ( '[]' ) ;
btns.forEach ( ボタン = > {
btn.style.background = 「カデブルー」 ;
} ) ;
}
与えられた出力は、「btn1」という名前の 2 つのボタンのみが背景色を変更したことを示しています。
ノート： 単一の要素を取得する場合は、document.querySelectorAll の代わりに document.querySelector を使用することをお勧めします。
結論
名前で要素を取得または取得するには、「 getElementsByName() ' または ' querySelectorAll() 」メソッド。要素を名前で取得するために最も一般的かつ効率的に使用される方法は、「getElementsByName()」メソッドです。この記事では、JavaScript で HTML 要素を名前で取得する方法を説明しました。