JavaScriptセレクターとはどういう意味ですか?

JavaScript では、セレクターは HTML ページ要素を取得するために使用されるメソッドです。ページ要素をオブジェクトに保存し、このオブジェクトの属性値に対して対応する操作 (「getElementById」など) を実行できます。 ()」、「getElementsByName()」など。

このチュートリアルの動作環境: Windows 10 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

JavaScript セレクターとは何ですか?

JS セレクターは主に、HTML ページ内の要素を取得し、ページ内の要素をオブジェクトに保存し、これらのオブジェクトのプロパティを変更するために使用されます。値に対して対応する操作を実行して、動的効果を実現し、ページを鮮やかで使いやすくします。注意すべき点は、操作はオブジェクトである必要があり、要素を直接オブジェクトとして使用することはできないということです。

JS セレクターはオブジェクトに対応する要素の属性を直接操作するため、変更するスタイルの値が直接行間のスタイルを変更することになり、CSS スタイルよりも優先度が非常に高いため、使用する場合は、 [完全な CSS スタイル設定] オプションに注意を払う必要があります。

js には主に 4 種類のネイティブ セレクターがあります

1. document.getElementById()
2. document.getElementsByClassName()
3. document.getElementsByName()
4. document.getElementsByTagName()

次に、いくつかのセレクターの基本的な使用法を簡単に紹介します

1.document.getElementById()
Id selector
Id 属性を通じてオブジェクトを取得
HTML 部分

	<p>这是一个p标签</p>

JS 部分

	var d1 = document.getElementById("p1")

図のように取得content:

このようにして、HTML から Element オブジェクトを取得し、操作することができます。

2.document.getElementsByClassName()
ClassNameセレクター
ClassName属性を通じてオブジェクトを取得します
HTML部分

	<p>这是一个p标签</p>
    
这是一个p标签
    这是一个a标签
    这是一个span标签

JS部分

	var c1 = document.getElementsByClassName("c1")

As取得内容:

クラス名セレクターは、配列に似たオブジェクトである HTMLCollection オブジェクトを取得します。特定の Element オブジェクトを選択する必要がある場合は、何かを行う必要があります。配列要素を取得する操作は次のとおりです (例として最初の項目を取り上げます):

 	var c1 =  document.getElementsByClassName("p1")[0]

この方法で、図に示すように、特定の Element オブジェクトを取得できます。
このように、この Element オブジェクトに対して特定の操作を実行できます

3.document.getElementsByTagName()

TagName selector
要素名を通じてオブジェクトを取得します
HTML 部分

        
• 0
        
• 1
        
• 2
        
• 3
        
• 4
    

JS

	var li = document.getElementsByTagName("li")

の一部を図に示します。

TagName セレクターによって取得されるコンテンツは、ClassName セレクターと同じです。 HTMLCollection オブジェクト したがって、特定の An Element オブジェクトを選択する必要がある場合は、次のように配列要素のフェッチと同様の操作を実行する必要もあります (最初の項目を例にします):

	var li = document.getElementsByTagName("li")[0]

このように、図に示すように、特定の Element オブジェクトを取得できます。

4.document.getElementsByName()

Name selector
Name 属性を通じてオブジェクトを取得します
HTML 部分

	<javascript>
        <input>1
        <input>2
        <input>3
    </javascript>セレクターとはどういう意味ですか?>

JS 部分

	 var JavaScriptセレクターとはどういう意味ですか? = document.getElementsByName('xx')

図は取得した内容を示しています:

名前セレクターは主にフォームなどの name 属性を必要とするタグを取得するために使用されます。取得されるのは NodeList オブジェクトです このタイプのオブジェクトは HTMLCollection と同じです オブジェクトは似ており、取得される特定のオブジェクトの操作も次のように配列と似ています:

	var JavaScriptセレクターとはどういう意味ですか? = document.getElementsByName("xx")[0]

添字が 0 の場合、最初の項目を取得します

	var JavaScriptセレクターとはどういう意味ですか? = document.getElementsByName('xx')[1]

添字が 1 の場合、2 番目の項目を取得します

関連する推奨事項:

javascript学習チュートリアル

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