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

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 つ以上の要素を指定します。要素を取得するためのセレクターとして、 idclass 、 type 、 attribute 、 attribute value などを使用できます。
複数のセレクターを区切るには、カンマ (,) を使用します。

返回值:指定された CSS セレクターに一致するドキュメント内のすべての要素を表すNodeListオブジェクト。
NodeListNodeList型の静的オブジェクトです。指定されたセレクターが無効な場合、 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)Byxxxxdom構造の変更に応じて常に変化する動的なコレクションを取得します。
つまり、リストを呼び出すたびにドキュメントが再クエリされ、無限ループの問題が発生します。

例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 querySelectorgetElementByIdの違い

例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ではありません
</スクリプト>

JavaScriptquerySelectorgetElementByIdメソッド_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 内のコレクションはライブであると想定されており、基礎となるドキュメントが変更されると自動的に更新されます。

実際、 HTMLCollectionNodeList非常によく似ています。どちらも要素の動的なコレクションであり、アクセスするたびにドキュメントの再クエリが必要になります。
違い: 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オブジェクトには、 ElementTextCommentなど、ドキュメント内のすべてのノードが含まれます。
HTMLCollectionオブジェクトには、ドキュメント内のElementノードのみが含まれます。
さらに、 HTMLCollectionオブジェクトは、 NodeListオブジェクトよりも 1 つ多いnamedItemメソッドを提供します。
したがって、ブラウザでは、 querySelectorAllの戻り値は静的なNodeListオブジェクトですが、 getElementsByシリーズの戻り値は実際には HTMLCollection オブジェクトになります。

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

querySelectorAllメソッドによって受け取られるパラメータは CSS セレクターです。
getElementsByシリーズが受け取るパラメータは、単一のclassNametagName 、および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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • ID で要素を取得する場合の js querySelector と getElementById の違い

<<:  HTML ページジャンプコード

>>:  3次元画像配置効果を実現する純粋なCSSのサンプルコード

推薦する

Windows 10 で MySql の解凍バージョンをインストールして構成する方法のチュートリアル

Windows 10 で MySql データベースの解凍バージョンをインストールするステップ 1: ...

Centos7 のインストールと Mysql5.7 の設定

ステップ1: MySQL YUMソースを取得するMySQLの公式サイトにアクセスして、RPMパッケー...

Ubuntu 20.04でルートアカウントを有効にする方法

Ubuntu 20.04 をインストールした後、デフォルトでは root アカウントのログイン権限が...

mysqladmin を使用して MySQL インスタンスの現在の TPS と QPS を取得する方法

mysqladmin は管理と操作を行う公式の mysql クライアント プログラムです。MySQL...

HTML タグのメタ概要、HTML5 のヘッド メタ属性の概要

序文metaはhtml言語のhead領域にある補助タグです。おそらく、これらのコードは不要だと思うで...

ab ツールを使用してサーバー上で API ストレス テストを実行します。

目次1 システムスループットの簡単な紹介2 試験方法2.1 クライアントテストツール2.1.1 GE...

MySQL クエリ ステートメントのプロセスと EXPLAIN ステートメントの基本概念とその最適化

ウェブサイトやサービスのパフォーマンスは、データベースの設計(適切な言語開発フレームワークを選択した...

MySQLのREDOログ(リドゥログ)とロールバックログ(アンドゥログ)の詳しい説明

序文:前回の記事では、MySQL システムでよく使用されるログをいくつか説明しました。実は、トランザ...

Linux で lvm 論理ボリューム パーティションのサイズを調整するチュートリアル (xfs や ext4 などのさまざまなファイル システム用)

序文システムをインストールしたときに、パーティション領域を適切に割り当てませんでした。その後のメンテ...

MySQLでバッチを更新するいくつかの方法

通常、フィールド値を更新するには次の SQL ステートメントを使用します。 mytable を更新し...

HTMLは角丸四角形を簡単に実装します

質問: div+css と配置を使用して角丸四角形を実現するにはどうすればよいですか?ソリューション...

FirefoxでCookieとお気に入りをインポートおよびエクスポートする方法

Firefox は、多くの拡張機能とプラグインを備えた、よく使用されるブラウザです。IE に比べて多...

dubbo での Zookeeper リクエストのタイムアウト問題: mysql8.0.15 に接続する mybatis+spring の構成

ここ2日間Javaを復習するつもりなので、練習にdubboを使ってショッピングモールプロジェクトを書...

uni-appのスタイルの詳細な説明

目次uni-app のスタイル要約するuni-app のスタイルsassプラグインは公式ウェブサイト...

スライドによるページめくり効果とクリックイベント問題をモバイル端末上で実装する

前述のこの記事はとても短いです〜主な目的は、モバイル端末上のクリックと js イベントのメカニズムに...