자바스크립트 querySelector

정의

querySelector() 함수는
HTML 문서나 특정한 요소 내에서 지정한 CSS 선택자와 일치하는 첫 번째 요소를 반환합니다.

 

일치하는 요소가 없으면 null을 반환합니다.

 

기본 예제

// HTML 문서 내에서 첫 번째 클래스명이 ".item"인 요소 선택
const firstItem = document.querySelector(".item");

// 특정 요소 내에서 선택
const container = document.getElementById("container");
const nestedButton = container.querySelector("button.primary");

// 일치하는 요소가 없을 경우
const notExist = document.querySelector(".no-such-class"); // null 반환

 

구문

// HTML 문서 내에서
document.querySelector(selectors)

// 특정 요소 내에서
element.querySelector(selectors)

 

매개변수

selectors: 선택하고자 하는 요소 객체입니다. 유효한 CSS 선택자 문자열로 지정해야 합니다. 지정하지 않으면 TypeError가 발생합니다.

 

반환 값

• Document 객체(문서 전체)에서 호출했을 경우에는 문서 내에서 지정한 CSS 선택자와 일치하는 첫 번째 요소 객체를 반환합니다.
• Element 객체(특정 요소)에서 호출했을 경우에는해당 특정 요소 내에서 지정한 CSS 선택자와 일치하는 첫 번째 요소 객체를 반환합니다.
• 일치하는 요소가 없으면 null을 반환합니다.

 

예제

특정한 요소 내에서 요소 찾기

<div class="container">
    <p>자손 요소입니다.</p>
</div>

let container = document.querySelector(".container"); // 특정한 요소 객체입니다.

let matche = container.querySelector("p"); // 특정한 요소 객체 내에서 요소 찾기
/* let matche = document.querySelector(".container p");와 동일한 반환값입니다. */

 

요소 스타일 변경하기

<div id="my-element">이 요소의 스타일을 변경합니다.</div>

const element = document.querySelector("#my-element");

element.style.backgroundColor = "lightblue";
element.style.color = "darkblue";

 

이벤트 리스너 추가하기

<button id="my-button">클릭하세요</button>

const button = document.querySelector("#my-button");

button.addEventListener("click", () => {
    alert("버튼이 클릭되었습니다!");
});

 

참고문헌

코딩에브리바디

자바스크립트 querySelector() 함수 사용법 - 코딩에브리바디

 

codingeverybody.jp

JavaScriptのquerySelector()関数の使い方 - codingEverybody

 

codingCourses

JavaScript querySelector() Function – A Complete Guide - codingCourses