[DOM - 4] querySelector

querySelector는 JavaScript를 사용하여 웹 페이지에서 원하는 HTML 요소를 선택하는 메서드입니다.

이 메서드는 CSS 선택자를 사용하여 요소를 찾고 선택할 수 있으며,

선택한 요소를 JavaScript로 조작하거나 정보를 가져올 수 있습니다.

문법

let element = document.querySelector("CSS_선택자");

동작

querySelector는 문서에서 첫 번째로 일치하는 요소를 선택합니다. 

따라서 여러 요소가 일치하는 경우 첫 번째 요소만 선택됩니다.
일치하는 요소가 없으면 null이 반환됩니다.

예시

클래스 이름으로 요소 선택

let firstButton = document.querySelector(".button"); // 클래스가 "button"인 첫 번째 요소 선택

아이디로 요소 선택

let mainHeading = document.querySelector("#header"); // 아이디가 "header"인 요소 선택

태그 이름과 클래스 조합으로 요소 선택

let firstParagraphWithClass = document.querySelector("p.highlight"); // 클래스가 "highlight"인 첫 번째 <p> 요소 선택

활용

선택한 요소를 JavaScript로 조작할 수 있습니다.

예를 들어, 속성 변경, 텍스트 변경, 이벤트 리스너 추가 등을 할 수 있습니다.

// 선택한 요소의 텍스트 변경 예제
var element = document.querySelector(".myElement");
element.textContent = "새로운 텍스트 내용";

선택한 요소의 정보를 가져올 수 있습니다.

// 선택한 요소의 텍스트 내용 가져오기
var element = document.querySelector(".myElement");
var textContent = element.textContent;

 

querySelector는 웹 개발에서 매우 유용한 도구로, 원하는 요소를 쉽게 찾고 조작할 수 있게 해줍니다. 

CSS 선택자의 개념을 이해하고 활용할 수 있다면 웹 페이지의 요소를 다루는 데 큰 도움이 됩니다.