定義

querySelector()メソッドは、ドキュメント内の指定された要素と一致する最初の要素を返します。もし、IDを指定して呼び出す場合、同じIDの要素が複数以上あったら最初の一致する要素を返します。

要素による呼び出し

ドキュメントの最初の<h4>要素を取得します。

Javascript

function myFunction() {
  document.querySelector("h4").style.backgroundColor = "red";
}

HTML

<!DOCTYPE html>
<html>
<body>

<h4>こちらは"h4要素"です。</h4>

<h4>こちらも"h4要素"です。</h4>

<p>ボタンをクリックして最初の"h4要素"の背景色を赤くしてみましょう。</p>

<button onclick="myFunction()">Try it</button>

</body>
</html>

実装

こちらは”h4要素”です。

こちらも”h4要素”です。

ボタンをクリックして最初の”h4要素”の背景色を赤くしてみましょう。

classによる呼び出し

classがexampleの最初の要素を呼び出します。

Javascript

function myFunction() {
  document.querySelector(".example").style.backgroundColor = "red";
}

HTML

<!DOCTYPE html>
<html>
<body>

<p class="example">タイトルの文字のクラスは"example"です。</p>
<p class="example">この段落のクラスも"example"です。</p> 

<p>ボタンをクリックして最初の"example"クラスの背景色を赤くしてみましょう。</p>

<button onclick="myFunction()">Try it</button>

</body>
</html>

実装

こちらの段落のクラスは”example”です。

こちらの段落のクラスも”example”です。

ボタンをクリックして最初の”example”クラスの背景色を赤くしてみましょう。

IDによる呼び出し

id がdemoで要素のテキストを変更します。

Javascript

function myFunction() {
  document.querySelector("#demo").innerHTML = "Hello World!";
}

HTML

<!DOCTYPE html>
<html>
<body>

<p id="demo">こんにちは!この段落のidは"demo"です!</p>

<p>ボタンをクリックして中の文章を変えましょう。</p>

<button onclick="myFunction()">文章を変える</button>

</body>
</html>

実装

こんにちは!この段落のidは”demo”です!

ボタンをクリックして中の文章を変えましょう。