JavaScript で名前で要素を取得

1. JavaScript の getElementsByName() で要素を取得
2. JavaScript の querySelectorAll() で要素を取得

getElementById() や getElementByClass() のような要素を取得する方法があります。しかし、特定の名前のすべてのアイテムを選択/編集したい場合はどうでしょうか。

JavaScript は、このタスクを実行するための querySelectorAll() または getElementsByName() メソッドを提供します。

この記事では、JavaScript で要素を名前で取得する方法を紹介します。

JavaScript の getElementsByName() で要素を取得

getElementsByName は、name 属性が指定された名前と一致する Objects / NodeList 要素を返す組み込みの document メソッドです。この NodeList は、インデックスを使用してアクセス可能なノードの配列を表します。このインデックスは、他の配列と同様に 0 で始まります。

構文

document.getElementsByName(name);

name は、一致する必要のある HTML 属性の name を指定する必須パラメーターです。要素が見つかった場合は、対応する DOM 要素のオブジェクトを返します。それ以外の場合は、null を返します。

getElementsByName と querySelectorAll の違いは、getElementsByName が最初に、指定された名前属性が指定された名前と一致する要素のみを選択することです。querySelectorAll は任意のセレクターを使用できますが、柔軟性が向上します。

詳細については、getElementById メソッドのドキュメントを参照してください。

コード例：

<div>
  <label>First Name</label>
  <input type="text" id="firstName" name="firstName" value="John">
</div>
<div>
  <label>Last Name</label>
  <input type="text" id="lastName" name="lastName" value="Doe">
</div>

const firstName = document.getElementsByName('firstName');
const lastName = document.getElementsByName('lastName');
console.log(firstName[0].value);
console.log(lastName[0].value);

上記のコードは、firstName と lastName で 2つの入力要素を定義しました。getElementsByName() を使用してドキュメントにアクセスすると、name 属性が名と一致するすべてのノードが検索され、NodeList が返されます。これは配列であるため、[0] を使用して最初に一致する要素を抽出できます。一致するアイテムが複数見つかった場合は、配列を介してすべての値を繰り返して出力できます。出力は次のようになります。

出力：

John
Doe

JavaScript の querySelectorAll() で要素を取得

querySelectorAll() は、selectors が指定されたセレクターと一致する Element / NodeList オブジェクトを返す組み込みの document メソッドです。複数のセレクターを転送することもできます。

querySelectorAll() と querySelector() の違いは、一致するアイテムのすべてのオブジェクトが最初に返され、次に単一の一致するアイテムのオブジェクトが返されることです。無効なセレクターが渡されると、SyntaxError が表示されます。

構文

document.querySelectorAll(selectors);

selectors は、一致する必要のある HTML 属性の selector を指定する必須パラメーターです。カンマで区切ることにより、複数のセレクターを渡すことができます。たとえば、document.querySelectorAll('input[name=firstName]') は、名前が firstName であるすべての入力要素を検索します。一致する要素が見つかった場合は、一致する DOM 要素オブジェクトを返します。それ以外の場合は、空の NodeList を返します。

詳細については、querySelectorAll メソッドのドキュメントをお読みください。

コード例：

<div>
  <label>FirstName</label>
  <input type="text" id="firstName" value="John">
</div>
<div>
  <label>Last Name</label>
  <input type="text" id="lastName" value="Doe">
</div>

const selectors = document.querySelectorAll('input[name=firstName]');
console.log(selectors.length, selectors[0].value);

上記のコードは、firstName と lastName で 2つの入力要素を定義しました。querySelectorAll() を使用してドキュメントにアクセスすると、name 属性が指定された名前と一致するすべてのノードが検索され、NodeList が返されます。これは配列であるため、[0] を使用して最初に一致する要素を抽出できます。複数のランダム要素が見つかった場合は、マトリックスを反復処理してすべての値を出力できます。出力は次のようになります。

出力：

1
John