1. 概要コードを見ると、 1.1 querySelector() と querySelectorAll() の使用querySelector() メソッド 定義: 注: 構文: パラメータ値:文字列必須。一致する要素に対して 1 つ以上の CSS セレクターを指定します。 ID、クラス、タイプ、属性、属性値などを使用して要素を選択します。 querySelectorAll() メソッド 定義: ヒント: NodeList オブジェクトの長さプロパティを使用してセレクターに一致する要素属性を取得し、すべての要素を反復処理して必要な情報を取得できます。 構文: パラメータ値:
1.2 getElement(s)Byxxxx の使用getElementById() メソッド 定義: 構文: パラメータ値: getElementsByTagName() メソッド 定義: getElementsByClassName() メソッド 定義: 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 というループ条件で無限ループに陥ります。 例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('リストの長さ:',リストの長さ); </スクリプト>
例2: 次のコードの静的コレクションは、ul 内のすべての 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ではありません </スクリプト>
なぜこのように設計されているのでしょうか? querySelectorAll メソッドは、W3C 仕様で明確に定義されています。 Chrome で何が起こるか見てみましょう: document.querySelectorAll('a').toString(); // "[object NodeList]" を返す document.getElementsByTagName('a').toString(); // "[object HTMLCollection]" を返します HTMLCollection は W3C で次のように定義されています。
実際、 これは少し理解しにくいですが、次の例を見ると理解しやすくなります。 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
2.2 受信したパラメータが異なる
var c1 = document.querySelectorAll('.b1 .c'); var c2 = document.getElementsByClassName('c'); var c3 = document.getElementsByClassName('b2')[0].getElementsByClassName('c'); 注意: 試す { var e1 = document.getElementsByClassName('1a2b3c'); var e2 = document.querySelectorAll('.1a2b3c'); } キャッチ (e) { コンソールエラー(e.message); } コンソールにログ出力します。(e1 && e1[0].className); コンソールにログ出力します。(e2 && e2[0].className); 2.3 異なるブラウザの互換性
JavaScript の querySelector メソッドと getElementById メソッドの違いに関するこの記事はこれで終わりです。JavaScript の querySelector メソッドと getElementById メソッドに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
>>: 3次元画像配置効果を実現する純粋なCSSのサンプルコード
Windows 10 で MySql データベースの解凍バージョンをインストールするステップ 1: ...
ステップ1: MySQL YUMソースを取得するMySQLの公式サイトにアクセスして、RPMパッケー...
Ubuntu 20.04 をインストールした後、デフォルトでは root アカウントのログイン権限が...
mysqladmin は管理と操作を行う公式の mysql クライアント プログラムです。MySQL...
序文metaはhtml言語のhead領域にある補助タグです。おそらく、これらのコードは不要だと思うで...
目次1 システムスループットの簡単な紹介2 試験方法2.1 クライアントテストツール2.1.1 GE...
ウェブサイトやサービスのパフォーマンスは、データベースの設計(適切な言語開発フレームワークを選択した...
序文:前回の記事では、MySQL システムでよく使用されるログをいくつか説明しました。実は、トランザ...
序文システムをインストールしたときに、パーティション領域を適切に割り当てませんでした。その後のメンテ...
通常、フィールド値を更新するには次の SQL ステートメントを使用します。 mytable を更新し...
質問: div+css と配置を使用して角丸四角形を実現するにはどうすればよいですか?ソリューション...
Firefox は、多くの拡張機能とプラグインを備えた、よく使用されるブラウザです。IE に比べて多...
ここ2日間Javaを復習するつもりなので、練習にdubboを使ってショッピングモールプロジェクトを書...
目次uni-app のスタイル要約するuni-app のスタイルsassプラグインは公式ウェブサイト...
前述のこの記事はとても短いです〜主な目的は、モバイル端末上のクリックと js イベントのメカニズムに...