「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>