JS の querySelector メソッドと getElementById メソッドの違い

1. 概要

コードを見ると、 querySelector()とquerySelectorAll()は基本的に要素を取得するために使用されているのに、なぜgetElementById()が使用されないのか疑問に思いました。
おそらくその2つを使ったことがないので理由はわかりません。

1.1 querySelector() と querySelectorAll() の使用

querySelector() メソッド

定義: querySelector()メソッドは、指定された CSS セレクターに一致するドキュメント内の要素を返します。

注: uerySelector()メソッドは、指定されたセレクターに一致する最初の要素のみを返します。すべての要素を返す必要がある場合は、代わりに querySelectorAll() メソッドを使用してください。

構文: document.querySelector(CSS selectors)；

パラメータ値:文字列必須。一致する要素に対して 1 つ以上の CSS セレクターを指定します。 ID、クラス、タイプ、属性、属性値などを使用して要素を選択します。
セレクターが複数ある場合は、それらをコンマで区切り、一致する要素を 1 つ返します。
戻り値: 指定された CSS セレクターに一致する最初の要素。見つからない場合は null を返します。無効なセレクターが指定された場合、SYNTAX_ERR 例外がスローされます。

querySelectorAll() メソッド

定義: querySelectorAll()メソッドは、指定された CSS セレクターに一致するドキュメント内のすべての要素を返し、NodeList オブジェクトを返します。
NodeList オブジェクトはノードのコレクションを表します。インデックスでアクセスできます。インデックス値は 0 から始まります。

ヒント: NodeList オブジェクトの長さプロパティを使用してセレクターに一致する要素属性を取得し、すべての要素を反復処理して必要な情報を取得できます。

構文: elementList = document.querySelectorAll(selectors);
elementList NodeList型の静的オブジェクトです。
selectors 、コンマで区切られた 1 つ以上のCSSセレクターを含む文字列です。

パラメータ値: String 。必須。 CSS セレクターに一致する 1 つ以上の要素を指定します。要素を取得するためのセレクターとして、 id 、 class 、 type 、 attribute 、 attribute value などを使用できます。
複数のセレクターを区切るには、カンマ (,) を使用します。

返回值:指定された CSS セレクターに一致するドキュメント内のすべての要素を表すNodeListオブジェクト。
NodeList 、 NodeList型の静的オブジェクトです。指定されたセレクターが無効な場合、 SYNTAX_ERR例外がスローされます。

1.2 getElement(s)Byxxxx の使用

getElementById() メソッド

定義: getElementById()メソッドは、指定された ID を持つ最初のオブジェクトへの参照を返します。
指定された ID を持つ要素が存在しない場合はnullを返します。
指定された ID を持つ要素が複数ある場合は、最初の要素が返されます。
ID を持たない要素を見つける必要がある場合は、CSS セレクターで querySelector() を使用することを検討してください。

構文: document.getElementById(elementID);

パラメータ値: String 。必須。要素 ID 属性値。
戻り値:指定されたIDを持つ要素オブジェクト要素

getElementsByTagName() メソッド

定義: getElementsByTagName()メソッドは、指定されたタグ名を持つオブジェクトのコレクションを返します。
ヒント:パラメータ値「*」はドキュメントのすべての要素を返します。
構文: document.getElementsByTagName(tagname)
String :取得する要素のタグ名 (必須)。
戻り値: NodeListオブジェクト、指定されたタグ名を持つ要素のコレクション

getElementsByClassName() メソッド

定義: getElementsByClassName()メソッドは、ドキュメント内の指定されたクラス名を持つすべての要素のコレクションをNodeListオブジェクトとして返します。
NodeListオブジェクトは、順序付けられたノードのリストを表します。 NodeListオブジェクトは、ノードリスト内のノードインデックス番号 (インデックス番号は 0 から始まります) を通じてテーブル内のノードにアクセスできます。
ヒント: NodeList オブジェクトの長さプロパティを使用して、指定されたクラス名の要素の数を判別し、各要素をループして必要な要素を取得できます。
構文: document.getElementsByClassName(classname)
パラメータ:文字列取得する要素のクラス名。複数のクラス名はスペースで区切られます (例: " test demo ")。
戻り値:指定されたクラス名の要素コレクションを表す NodeList オブジェクト。コレクション内の要素の順序は、コード内に表示される順序になります。

2. 違い

2.1 getElement(s)Byxxxx は動的コレクションを取得し、querySelector は静的コレクションを取得します。

動的とは、選択した要素がドキュメントとともに変更されることを意味し、静的とは、要素が取り出された後にドキュメントの変更とは関係がないことを意味します。

例1:

<本文>
  <ul id="box">
    <li class="a">テスト 1</li>
    <li class="a">テスト 2</li>
    <li class="a">テスト 3</li>
  </ul>
</本文>

<script type="text/javascript">
  // ul を取得し、後で li を動的に追加します
  var ul = document.getElementById('box');
  //既存の ul 内の li を取得します
  var リスト = ul.getElementsByTagName('li');
  for(var i =0; i < list.length; i++){
    ul.appendChild(document.createElement('li')); // liを動的に追加
  }
</スクリプト>

上記のコードは、i < list.length というループ条件で無限ループに陥ります。
初めて 3 つの li を取得した後は、ul に新しい要素が追加されるたびに、リストの値が更新され、ul 内のすべての li が再取得されるからです。
つまり、 getElement(s)Byxxxx 、 dom構造の変更に応じて常に変化する動的なコレクションを取得します。
つまり、リストを呼び出すたびにドキュメントが再クエリされ、無限ループの問題が発生します。

例1の変更:

for ループ条件を i < 4 に変更します。その結果、ul に 4 つの新しい要素が追加され、挿入される li タグの数は 7 になります。

<本文>
  <ul id="box">
    <li class="a">テスト 1</li>
    <li class="a">テスト 2</li>
    <li class="a">テスト 3</li>
  </ul>
</本文>

<script type="text/javascript">
  var ul = document.getElementById('box');

  var リスト = ul.getElementsByTagName('li');
  (var i = 0; i < 4; i++){
    ul.appendChild(document.createElement('li'));
  }
  console.log('リストの長さ:',リストの長さ);
</スクリプト>

JavaScript javascript querySelectorとgetElementByIdの違い

例2:

次のコードの静的コレクションは、ul 内のすべての li を取得するために.querySelectorAll('li')に反映されます。後で動的に li がいくつ追加されても、そのパラメータには影響しません。

<本文>
  <ul id="box">
    <li class="a">テスト 1</li>
    <li class="a">テスト 2</li>
    <li class="a">テスト 3</li>
  </ul>
</本文>

<script type="text/javascript">
  var ul = document.querySelector('ul');

  var リスト = ul.querySelectorAll('li');
  for(var i = 0; i < list.length; i++){
    ul.appendChild(document.createElement('li'));
  }
  console.log('list.length:',list.length); //出力結果は3のままで、この時点でのliの数は6ではありません
</スクリプト>

JavaScriptのquerySelectorとgetElementByIdメソッド_javascript_02違い

なぜこのように設計されているのでしょうか?

querySelectorAll メソッドは、W3C 仕様で明確に定義されています。

The NodeList object returned by the querySelectorAll() method must be static ([DOM], section 8).

Chrome で何が起こるか見てみましょう:

document.querySelectorAll('a').toString(); // "[object NodeList]" を返す
document.getElementsByTagName('a').toString(); // "[object HTMLCollection]" を返します

HTMLCollection は W3C で次のように定義されています。

HTMLCollection はノードのリストです。個々のノードには、序数インデックス、ノードの名前または ID 属性のいずれかでアクセスできます。注: HTML DOM 内のコレクションはライブであると想定されており、基礎となるドキュメントが変更されると自動的に更新されます。

実際、 HTMLCollectionとNodeList非常によく似ています。どちらも要素の動的なコレクションであり、アクセスするたびにドキュメントの再クエリが必要になります。
違い: HTMLCollection はDocument Object Model HTML仕様に属しますが、NodeList はDocument Object Model Core仕様に属します。

これは少し理解しにくいですが、次の例を見ると理解しやすくなります。

var ul = document.getElementsByTagName('ul')[0],
    lis1 = ul.childNodes、
    lis2 = ul.children;
console.log(lis1.toString(), lis1.length); // "[オブジェクト NodeList]" 11
console.log(lis2.toString(), lis2.length); // "[オブジェクト HTMLCollection]" 4

NodeListオブジェクトには、 Element 、 Text 、 Commentなど、ドキュメント内のすべてのノードが含まれます。
HTMLCollectionオブジェクトには、ドキュメント内のElementノードのみが含まれます。
さらに、 HTMLCollectionオブジェクトは、 NodeListオブジェクトよりも 1 つ多いnamedItemメソッドを提供します。
したがって、ブラウザでは、 querySelectorAllの戻り値は静的なNodeListオブジェクトですが、 getElementsByシリーズの戻り値は実際には HTMLCollection オブジェクトになります。

2.2 受信したパラメータが異なる

querySelectorAllメソッドによって受け取られるパラメータは CSS セレクターです。
getElementsByシリーズが受け取るパラメータは、単一のclassName 、 tagName 、およびnameのみです。

var c1 = document.querySelectorAll('.b1 .c');
var c2 = document.getElementsByClassName('c');
var c3 = document.getElementsByClassName('b2')[0].getElementsByClassName('c');

注意: querySelectorAllが受け取るパラメータは、CSS セレクタ仕様に厳密に準拠している必要があります。次の記述は例外をスローします (CSS セレクタ内の要素名、クラス、および ID は数字で始まることはできません)。

試す {
  var e1 = document.getElementsByClassName('1a2b3c');
  var e2 = document.querySelectorAll('.1a2b3c');
} キャッチ (e) {
  コンソールエラー(e.message);
}
コンソールにログ出力します。(e1 && e1[0].className);
コンソールにログ出力します。(e2 && e2[0].className);

2.3 異なるブラウザの互換性

querySelectorAll は、IE 8 以降、FF 3.5 以降、Safari 3.1 以降、Chrome、Opera 10 以降でサポートされています。
getElementsBy シリーズは、最新の仕様に追加された getElementsByClassName を例にとると、すでに IE 9+、FF 3+、Safari 3.1+、Chrome、Opera 9+ でサポートされています。

JavaScript の querySelector メソッドと getElementById メソッドの違いに関するこの記事はこれで終わりです。JavaScript の querySelector メソッドと getElementById メソッドに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: