「JavaScript」Document.querySelector()によるHTML要素を取得

2014年8月27日2021年10月14日

書式
element = document.querySelector(selectors);
Document の querySelector() メソッドは、指定されたセレクターまたはセレクターのグループに一致する、
文書内の最初の Element を返します。
一致するものが見つからない場合は null を返します。
引数：DOMString で、照合する 1 つ以上のセレクターを設定します。
この文字列は妥当な CSS セレクターでなければなりません。
操作例
document.querySelector(“p").style.backgroundColor = 値1;
document.querySelector(“span").style.backgroundColor = 値2;
document.querySelector(“div").style.backgroundColor = 値3;

使用例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>querySelector()によるHTML要素の取得</title>
</head>
<body>
<!-- p要素-->
<p>test 11</p>
<!-- span要素-->
<span>test 22</span>
<!-- div要素-->
<div>test 33 </div>
      
<button onclick="cftFunc()">テスト</button>
<script>
function cftFunc() {
      //pセレクタ要素の取得 背景色を緑に指定
    document.querySelector("p").style.backgroundColor = "green";
      //spanセレクタ要素の取得　背景色を赤に指定
      document.querySelector("span").style.backgroundColor = "red";
      //divセレクタ要素の取得　背景色を黄色に指定
       document.querySelector("div").style.backgroundColor = "yellow";
}
</script>

</body>
</html>

JavaScript

Posted by arkgame

関連記事: