「JavaScript]querySelectorで複数のセレクタを使用するサンプル

2021年10月14日

説明
element = document.querySelector(selectors);
引数:DOMString で、照合する 1 つ以上のセレクターを設定します。この文字列は妥当な CSS セレクターでなければなりません。
そうでない場合は SyntaxError が発生します。
文書内の最初の Element を返します。一致するものが見つからない場合は null を返します。

使用例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>querySelectorによるhtml要素の取得</title>
</head>
<body>

<h3> h3 要素 querySelector適用</h3>
<h2> h2 要素 querySelector適用しない</h2>
<script>
      //複数セレクタh2 h3は引数として使用して、最初htmlの要素(h3)を取得
document.querySelector("h2, h3").style.backgroundColor = "skyblue";
</script>

</body>
</html>

 

JavaScript

Posted by arkgame