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のサンプルコード
背景:サイトはフロントエンドとバックエンドから分離されています: vue+springbootフロン...
導入yum (Yellow dog Updater, Modified) は、Fedora、RedH...
JavaScript 入門JavaScript は軽量なインタープリタ型の Web 開発言語です。言...
テーブル構造を編集するための MySQL の alter コマンドの使用。具体的な内容は以下のとおり...
問題の原因ご存知のとおり、すべてのネットワーク動作は対応するネットワークトラフィックを生成し、すべて...
1. 建設1. htpasswd.txtファイルを準備するファイルには、パッケージを倉庫にアップロー...
CSS にカスケード メカニズムがあるのはなぜですか? CSS では、同じ要素の特定のプロパティに同...
目次簡単なコンポーネントの例より複雑な親子コンポーネントのケースオンセレクトの書き方反応する子供Re...
たくさんのチュートリアルを読みましたが、うまくインストールできませんでした。しばらく試行錯誤した後、...
これは新しいバージョンではもう不可能なようで、推奨されません。そうでない場合は、ソフト リンクを直接...
Mysql の追加、削除、変更、クエリステートメントのシンプルな実装追加されたレコード: テーブル名...
公式ウェブサイトhttps://cli.vuejs.org/ja/ガイド/場合によっては、コンポーネ...
この記事では、適応解像度を実現するためのVue2.0の具体的なコードを参考までに紹介します。具体的な...
すべてのオーケストレーション ファイルと構成ファイルは、私の Github からアクセスできます。構...
序文CentOS 環境変数設定ファイル システムは階層型システムであり、他のマルチユーザー アプリケ...