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 要素を選択することもできます。
このメソッドは、指定されたタグ名を持つドキュメント内のすべての要素の配列のようなリストを返します。
例: すべての
要素を選択します:
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 ドキュメントの最上位要素は、ドキュメント属性として直接使用できます。
たとえば、 要素には、属性 document.documentElement を使用してアクセスできます。
この要素には、document.body プロパティを使用してアクセスできます。
var html = document.documentElement; var body = document.body;
注: document.body がタグの前 (たとえば、
内) で使用される場合、body 要素の代わりに null が返されます。次の HTML オブジェクト (およびオブジェクト コレクション) にもアクセスできます:
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
