querySelectorメソッドの使い方-jsチュートリアル-php.cn

querySelectorメソッドの使い方

不言

リリース： 2019-02-14 15:23:15

オリジナル

20669 人が閲覧しました

querySelector() メソッドを使用すると、指定された CSS セレクターに一致するドキュメント内の要素を返すことができます。すべての要素を返す必要がある場合は、代わりに querySelectorAll() メソッドを使用する必要があります。 querySelector メソッドの使用法。

querySelectorメソッドの使い方

まず、querySelector()

document.querySelector(CSS selectors)

ログイン後にコピー

の基本的な構文を見てみましょう。CSS セレクターは、1 つ以上の CSS を表します。一致する要素セレクター。要素は、ID、クラス、タイプ、属性、属性値などを使用して選択できます。

注: 複数のセレクターの場合は、カンマを使用して区切ります。

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

コードは次のとおりです

<!DOCTYPE html>
<html>
<head>
   <title></title>
</head>
<body>
<h2 class="example">文本的标题</h2>
<p class="example"> 文本的段落。</p> 
<button onclick="myFunction()">按钮</button>
<script>
function myFunction() {
    document.querySelector(".example").style.backgroundColor = "red";
}
</script>
</body>
</html>

ログイン後にコピー

効果は次のとおりです。「ボタン」をクリックすると、テキストの背景色が変化します。タイトルは次のようになります。 Red

querySelectorメソッドの使い方