More than 3 years have passed since last update.

querySelectorの使い方

Posted at 2020-10-26

#querySelector
JavaScriptには「getElementById()」とか「getElemetnsByClassName()」などHTML要素を取得できるメソッドはありますが、

「querySelector()」を使うとid属性値・class属性値などを意識せずにjQuery感覚でHTML要素をセレクタ指定することができます。

index.html

<p>全ての色が混ざり合うと白くなるものは何か？</p>
<button onclick="result1()">答え</button>
<p id="ans1">ここに答えを表示</p>

index.js

let list1 = document.querySelector('#ans1');
function result1() {
  list1.innerHTML = '<h4>加法混色</h4>'+'<img src="img/rgb.png">';
}