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のサンプルコード

推薦する

Nginx 外部ネットワーク アクセス イントラネット サイト構成操作

背景:サイトはフロントエンドとバックエンドから分離されています: vue+springbootフロン...

Linux yum パッケージ管理方法

導入yum (Yellow dog Updater, Modified) は、Fedora、RedH...

JavaScript を使用してテーブル情報を追加および削除する

JavaScript 入門JavaScript は軽量なインタープリタ型の Web 開発言語です。言...

2級コンピュータ試験のMySQL知識ポイント mysql alterコマンド

テーブル構造を編集するための MySQL の alter コマンドの使用。具体的な内容は以下のとおり...

ova ファイルを VMware にインポートする際の落とし穴の概要

問題の原因ご存知のとおり、すべてのネットワーク動作は対応するネットワークトラフィックを生成し、すべて...

Docker を使用して pypi プライベート リポジトリを構築する方法

1. 建設1. htpasswd.txtファイルを準備するファイルには、パッケージを倉庫にアップロー...

CSSカスケーディングメカニズムについての簡単な説明

CSS にカスケード メカニズムがあるのはなぜですか? CSS では、同じ要素の特定のプロパティに同...

React Hooksの使用例

目次簡単なコンポーネントの例より複雑な親子コンポーネントのケースオンセレクトの書き方反応する子供Re...

Win10環境にMysql5.7.23をインストールする際の問題点と落とし穴

たくさんのチュートリアルを読みましたが、うまくインストールできませんでした。しばらく試行錯誤した後、...

Docker Docker の保存場所を変更する コンテナイメージのサイズ制限を変更する操作

これは新しいバージョンではもう不可能なようで、推奨されません。そうでない場合は、ソフト リンクを直接...

Mysql の追加、削除、変更、クエリステートメントのシンプルな実装

Mysql の追加、削除、変更、クエリステートメントのシンプルな実装追加されたレコード: テーブル名...

vue3 テレポートの詳細な使用例

公式ウェブサイトhttps://cli.vuejs.org/ja/ガイド/場合によっては、コンポーネ...

Vue2.0は適応解像度を実装する

この記事では、適応解像度を実現するためのVue2.0の具体的なコードを参考までに紹介します。具体的な...

Docker-compose を使用して ELK クラスターを構築する方法

すべてのオーケストレーション ファイルと構成ファイルは、私の Github からアクセスできます。構...

CentOS の環境変数と設定ファイルの詳細な説明

序文CentOS 環境変数設定ファイル システムは階層型システムであり、他のマルチユーザー アプリケ...