「JavaScript」Document.querySelector()によるHTML要素を取得
書式
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>
<!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>
<!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>