HTML要素を取得するJavaScriptのquerySelector()メソッドの紹介

QuerySelector()はJavaScriptから任意のHTML要素を検出して取得できるメソッドです。JavaScriptには元々getElemenById()やgetElemetnsByClasNamo()といったHTML要素を取得するメソッドがありましたが、querySelector()を使えば、 id 属性値や class 属性値などが分からなくても、jQuery の意味で HTML 要素を選択的に指定できます。

#つまり、querySelector() を使用して任意の HTML 要素を取得できます。

まず querySelector()

querySelector() の基本構文を見てみましょう。通常、querySelector() はターゲット範囲で実行されます。

document.querySelector( CSS选择器 )

この場合、querySelector() はドキュメント全体に対して実行されます。 jQuery 風の CSS セレクターをパラメーターに指定することで、任意の HTML 要素を取得できます。

プログラムは、最初に一致する HTML 要素を取得すると終了することに注意してください。

つまり、複数の要素を取得したい場合は、ループ処理を作成するか、後述する querySelectorAll().

を使用する必要があります。引き続き、querySelector() の使用方法を見てみましょう。

ID 属性と Class 属性を持つ HTML 要素を取得します

例は次のとおりです

HTML

<h1 class="sample">标题示例</h1>
<p id="test">内容示例</p>

JavaScript

var elem1 = document.querySelector('.sample');
var elem2 = document.querySelector('#test');
console.log(elem1);
console.log(elem2);

実行結果は次のとおりです。

querySelector() の各パラメータが CSS セレクターを指定していることがわかります。

したがって、同じ querySelector() はパラメータの指定方法に従って任意の HTML 要素を取得することもできます。

実行結果から要素が取得できていることがわかります。

querySelectorAll()の使用方法を見てみましょう

querySelectorAll()は複数のHTML要素を取得できます。

まずは基本的な構文を見てみましょう

document.querySelectorAll(CSS选择器)

このように、メソッドと指定パラメータの対象範囲はquerySelector()と同じです。

最大の違いは、一致する HTML 要素をすべて取得できることです。

queryselector() は最初に一致した要素しか取得できないため、querySelectorAll() を使用して複数の要素を取得できます。

具体的な例を見てみましょう

HTML コード

<ul>
  <li class="list">列表１</li>
  <li class="list">列表２</li>
  <li class="list">列表３</li>
</ul>

この例では、複数のリスト要素が配置されています。

このリストのすべての要素を取得するには、次のコマンドを実行できます。

JavaScript

var elem = document.querySelectorAll('.list');
console.log(elem);

この例では、クラス属性値「list」がパラメータとして指定されています。 querySelectorAll() 。

これによりすべてのリスト要素が指定されるため、すべてのリスト項目を取得できます。

もちろん、「li」要素をそのまま設定することもできますが、他のリスト要素とのバランスに注意してください。

querySelectorAll() で取得した要素は NodeList と呼ばれ、配列のようなデータ構造を格納します。

以下では、「forEach」を使用して一度に 1 つの要素を処理します。これにより、配列を効果的に繰り返し処理できます。

var elem = document.querySelectorAll('.list');
elem.forEach(function(value) {
    console.log(value);
})

実行結果は次のとおりです

この例では、querySelectorAll() を使用して取得した結果が forEach ステートメントによってループされます。

パラメータ「value」を指定することで、上記結果のように各HTML要素を取得できます。

注: querySelectorAll() を使用して取得した HTML 要素に対して任意の処理を実行できます。

以上がHTML要素を取得するJavaScriptのquerySelector()メソッドの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。