[DOM_Document] JS - querySelector() 메서드 ★ - 쿼리선택자 (= 문서 안 지정 선택자 중 첫번째 것만 = querySelector메서드 = 쿼리실렉터)

document.querySelector()

 

<h1 class="hz">홈짱닷컴</h1>

<h2 class="hz">Homzzang.com</h2> 

<h3 class="hz">홈페이지 제작관리</h3> 

<button onclick="homzzang()">클릭</button>

<script>

function homzzang() {

  document.querySelector(".hz").style.backgroundColor = "yellow";

}

</script>

 

결과보기

주의: 2번째 이하는 선택 안 됨. (※ 일치하는 CSS선택자 중 가장 첫번째것만 반환.)

예제: Bihon 님 (200704) https://sir.kr/qa/367000 (문자열 정렬기)

PS.

document.querySelector() : 일치하는 가장 첫 번째 것만 반환.

document.querySelectorAll() : 일치하는 모든 요소의 NodeList 반환.