ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScript にはセレクターがありますか?

JavaScript にはセレクターがありますか?

青灯夜游
青灯夜游オリジナル
2022-02-21 17:52:271759ブラウズ

JavaScript にはセレクターがあります。一般的に使用される js セレクターには、getElementById()、getElementsByName()、getElementsByTagName()、querySelector()、querySelectorAll() などが含まれます。

JavaScript にはセレクターがありますか?

このチュートリアルの動作環境: 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 オブジェクト (およびオブジェクト コレクション) にもアクセスできます:

#プロパティ説明##document.anchorsdocument.applets (HTML5 では非推奨) document.baseURIdocument.bodydocument.cookiedocument.doctypedocument.documentElementdocument.documentMode##document.documentURIドキュメントの URI を返しますdocument.domainドキュメント サーバーのドメイン名を返しますdocument.domConfigDOM 設定を返しますdocument.embedsすべての d8e2720730be5ddc9c2a3782839e8eb6 要素を返しますdocument。フォームすべてを返す ff9c23ada1bcecdd1a0fb5d5a0f18437 要素document.headReturn93f0f5c25f18dab9d176bd4f6de5d30e要素document.imagesすべての a1f02c36ba31691bcfe87b2722de723b 要素を返すdocument.implementationDOM 実装を返しますドキュメントのエンコーディング (文字セット) を返します 日付と時刻を返しますドキュメントが更新されましたhref 属性を持つすべての 03fc64e1e502d5ba947b3a9af06d2d2a 要素と 3499910bf9dac5ae3c52d5ede7383485 要素を返しますドキュメントの (読み込み中) を返します。中) ステータスリファラー (リンクされた) の URI を返します。 document)すべての 3f1c4e4b6b16bbbd69b2ee476dc4f83a 要素を返します# #エラー チェックが強制されるかどうかを返します document.titleb2386ffb911b14667cb8f0f91ea547a7 要素を返しますdocument.URL ドキュメントの完全な URL を返しますJavaScript 学習チュートリアル]
すべてのファイルを返します。 3499910bf9dac5ae3c52d5ede7383485 要素
の name 属性は、すべての 082dedeb30a00d0e6e2cdb74a392fac3 要素
ドキュメントの絶対ベース URI を返します
戻り値 Element
ドキュメントの Cookie を返します
ドキュメントのドキュメント タイプを返します
100db36a723c770d327fc0aef2ce13b1 要素を返します
ブラウザで使用されるモードを返します
は廃止されました;
#document.inputEncoding
document.lastModified
document .links
#document.readyState
document.referrer
document.scripts
document.strictErrorChecking
[関連する推奨事項:
# #

以上がJavaScript にはセレクターがありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。