querySelector操作domの使い方

1219 ワード

元素DOMオブジェクトの取得には多くの方法があります.これまではgetElementByIdとgetElements ByTagNameなどを使っていましたが、これらの方法とquerySelectorについてまとめてみました.一般的に元素を取得する方法は3つあります.元素IDとラベル名とクラス名でそれぞれ取得します.
1.DOMは、ID属性に対応するノードオブジェクトを返すgetElementByIdという方法を提供しており、これはdocumentオブジェクト特有の関数であり、これだけでこの方法を呼び出すことができます.使用方法は以下の通りです.
2.getElements ByTagName方法は、オブジェクト配列(正確にはHTMLClectionの集合)に戻り、要素を返す順序は、それらがドキュメント内の順序であり、getElements ByTagName()メソッドに渡される文字列は、大文字と小文字を区別せずに書くことができ、使用方法は以下の通りである.
3.DOMはまた、指定されたクラス名の要素を取得するためにゲットエレメント・ByClass Name方法を提供し、この方法はドキュメント内のすべての指定されたクラス名の要素セットをNodeListオブジェクトとして返す.ノードリストは、ノードリストの順序を表す.ノードリストのノードインデックス番号を通じてリストのノードにアクセスすることができます.したがって、時々使用するときには、下付きを指定します.使用方法は以下の通りです.
4.querySelector()方法は、CSSセレクタ要素を指定する最初のサブ要素にマッチすることを返す.この方法は、マッチング指定セレクタの最初の要素のみを返します.すべての整合要素を返すには、querySelectorAll()を使用します.具体的な書き方は以下の通りです.
document.querySelector("#app")      //   id  app     
querySelectorはcss仕様で実装されているので、入力された文字列の最初の文字は数字ではない.
最後に、クエリの資料に基づいてまとめます.query選択符で選択された要素と要素配列は静的で、getElementという方法で選択された要素はダイナミックです.静的とは、選択したすべての要素の配列は、ドキュメント操作によっては変わりません.使う時にはgetElementという方法が性能的に優れています.query選択子は便利です.