ホームページ >ウェブフロントエンド >フロントエンドQ&A >JavaScript にはセレクターがありますか?
JavaScript にはセレクターがあります。一般的に使用される js セレクターには、getElementById()、getElementsByName()、getElementsByTagName()、querySelector()、querySelectorAll() などが含まれます。
このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。
JavaScript にはセレクターがあります。
JavaScript は、HTML 要素のコンテンツや値を取得または変更したり、特定の効果を適用したりするために最も一般的に使用されます。
これを行うには、まず要素を見つける必要があります。要素の一致には JavaScript セレクターが使用されます。検索方法:
ID による HTML 要素の検索
タグ名による HTML 要素の検索
クラス名による HTML 要素の検索
CSS セレクターによる HTML 要素の検索
HTML オブジェクト コレクションによるHTML 要素を検索するための
一般的に使用される JS セレクターは、getElementById()、getElementsByName()、getElementsByTagName()、getElementsByClassName()、querySelector()、querySelectorAll() です。
ID による HTML 要素の検索
getElementById() メソッドを使用すると、一意の ID に基づいて要素を選択できます。
これは、DOM ツリーで HTML 要素を見つける最も簡単な方法です。
次の例では、ID 属性 id="msg" を持つ要素を選択します。
var x = document.getElementById("msg");
要素が見つかった場合、メソッドはその要素をオブジェクトとして返します。
要素が見つからない場合、myElement には null が含まれます。
タグ名による HTML 要素の検索
getElementsByTagName() メソッドを使用して、タグ名によって HTML 要素を選択することもできます。
このメソッドは、指定されたタグ名を持つドキュメント内のすべての要素の配列のようなリストを返します。
例: すべての e388a4556c0f65e1904146cc1a846bee 要素を選択します:
var x = document.getElementsByTagName("p");
クラス名で HTML 要素を検索
getElementsByClassName() メソッドを使用して選択できます。特定のクラス名を持つすべての要素。
このメソッドは、指定されたクラス名を持つドキュメント内のすべての要素の配列のようなリストを返します。
この例では、class="demo" を持つすべての要素のリストが返されます。
var x = document.getElementsByClassName("demo");
CSS セレクターによる HTML 要素の検索
querySelectorAll() メソッドを使用して、指定された CSS セレクターに一致する要素 (ID、クラス、タイプなど) を選択します。
このメソッドは、指定されたセレクターに一致するすべての要素の配列のようなリストを返します。
CSS セレクターは、ドキュメント内の HTML 要素を選択するための非常に強力かつ効果的な方法を提供します。
var x = document.querySelectorAll("div");
HTML オブジェクトのコレクションから HTML 要素を検索
HTML ドキュメントの最上位要素は、ドキュメント属性として直接使用できます。
たとえば、100db36a723c770d327fc0aef2ce13b1 要素には、属性 document.documentElement を使用してアクセスできます。
この要素には、document.body プロパティを使用してアクセスできます。
var html = document.documentElement; var body = document.body;
注: document.body がタグの前 (たとえば、93f0f5c25f18dab9d176bd4f6de5d30e 内) で使用される場合、body 要素の代わりに null が返されます。
次の HTML オブジェクト (およびオブジェクト コレクション) にもアクセスできます:
以上がJavaScript にはセレクターがありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。