name属性の値を指定して要素ノードを取得
【開発環境】
OS:Win11(64ビット)
VSCode1.72.2、
【getElementsByName メソッド】
Document オブジェクトの getElementsByName メソッドは name 属性の値を指定して要素ノードを取得します。
・書式
document.getElementsByName(name)
引数には name 属性の値を DOMString オブジェクトで指定します(例えば 'hobby' など)。戻り値は NodeList オブジェクトです。
NodeList オブジェクト→複数の要素ノードの集合です。 NodeList オブジェクトでは length プロパティと item メソッドが用意されており、次のように取得した要素ノードの数を取得したり、指定の要素ノードを取り出すことができます。
let elements = document.getElementsByName('hobby'); // 取得した要素を取得 let len = elements.length; // インデックスを指定して要素を取得 let element = elements.item(0); // 次の形式でもインデックスを指定して要素を取得 let element = elements[0];
同じ name 属性の値を持つ要素ノードは、 HTML ページの中で記述された順番にインデックスが割り当てられています。インデックスは最初が 0 で 1, 2, 3... と続いていきます。
指定した name 属性の値を持つ要素ノードが見つからなかった場合、 getElementsByName メソッドは null を返すわけではなく、 length が 0 の NodeList オブジェクトを返します。
サンプルコード
サーバを起動させる
ボタンをクリックする
※コメント投稿者のブログIDはブログ作成者のみに通知されます