JavaScript でタイプ別に要素を取得

1. JavaScript の querySelectorAll() で要素を取得
2. JavaScript で getElementsByTagName() によって要素を取得する

JavaScript は、getElementById() や getElementByClass() などの要素を取得するためのさまざまな方法を提供します。しかし、特定のタイプのすべての要素を選択/処理したい場合はどうでしょうか？JavaScript は、このようなタスクを実行するための querySelectorAll() メソッドまたは getElementsByTagName() メソッドを提供します。

この記事では、JavaScript で要素をタイプ別に取得する方法を学習します。

JavaScript の querySelectorAll() で要素を取得

これは、JavaScript によって提供される組み込みの document メソッドであり、selector が指定されたセレクターと一致する要素 objects / NodeList を返します。複数のセレクターを渡すこともできます。querySelectorAll() と querySelector() には 1つの違いがあります。最初のオブジェクトでは、一致する要素のすべてのオブジェクトが返され、2 番目のオブジェクトでは、単一の一致する要素オブジェクトになります。無効なセレクターが渡されると、SyntaxError が発行されます。

構文

document.querySelectorAll($selectors);

パラメータ

• $selectors：一致する必要がある HTML 属性の selector を指定する必須パラメーターです。複数のセレクターは、コンマ区切りで渡すことができます。たとえば、document.querySelectorAll("p") はすべての p タグ要素を検索します。

戻り値

対応する要素が見つかった場合、対応する DOM 要素オブジェクトを返します。それ以外の場合は、空の NodeList を返します。

コード例：

<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[type=text]');
console.log(selectors.length, selectors[0].value, selectors[1].value);

出力：

2
John
Doe

JavaScript で getElementsByTagName() によって要素を取得する

これは、JavaScript によって提供される組み込みの document メソッドであり、tag が指定されたタグ名と一致する要素 objects / NodeList を返します。ルートノードも検索に含まれ、ライブ HTML コレクションが返されます。

構文

document.getElementsByTagName($name);

パラメータ

• $name：一致する必要がある HTML 属性の tagName を指定する必須パラメーターです。

戻り値

対応する要素が見つかった場合、対応する DOM 要素オブジェクトを返します。それ以外の場合は、null を返します。

getElementsByTagName と querySelectorAll の唯一の違いは、最初の要素は、指定されたタグ名が指定されたタグ名と一致する要素のみを選択することです。対照的に、querySelectorAll は任意のセレクターを使用できるため、柔軟性とパワーが大幅に向上します。

また、getElementsByTagName はライブノードリストを返し、querySelectorAll は静的ノードリストを返します。ライブノードリストは、DOM が変更されるとすぐに結果を更新するのに役立ち、クエリを実行する必要はありません。

コード例：

<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 inputs = document.getElementsByTagName('input');

for (let i = 0; i < inputs.length; i++) {
  if (inputs[i].type.toLowerCase() == 'text') {
    console.log(inputs[i].value);
  }
}

出力：

John
Doe