name属性の値を指定して要素ノードを取得

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 オブジェクトを返します。
サンプルコード

サーバを起動させる

ボタンをクリックする