HTML DOM의 querySelector() 메서드는 매개변수로 전달된 CSS 선택자와 일치하는 요소 중 문서 내 첫 번째 요소를 반환합니다. 만약 일치하는 요소가 없다면 null을 반환합니다.
문법
querySelector() 메서드의 기본 문법은 다음과 같습니다.
document.querySelector("CSS 선택자");CSS 선택자에는 클래스(.className), 아이디(#idName), 태그명 등 다양한 형태를 사용할 수 있습니다.
예제
querySelector() 메서드를 활용해 버튼 클릭 시 특정 단락(p) 요소의 스타일을 변경하는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<style>
html{
height:100%;
}
body{
text-align:center;
color:#fff;
background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat;
height:100%;
}
.btn{
background:#0197F6;
border:none;
height:2rem;
border-radius:2px;
width:35%;
margin:2rem auto;
display:block;
color:#fff;
outline:none;
cursor:pointer;
}
</style>
</head>
<body>
<h1>DOM querySelector() 메서드 데모</h1>
<p class="awesome-para">안녕하세요! 임의의 텍스트가 포함된 단락입니다.</p>
<button onclick="changeColor()" class="btn">단락 스타일 변경</button>
<script>
function changeColor() {
var paraElement = document.querySelector(".awesome-para");
paraElement.style.color="#db133a";
paraElement.style.fontSize="1.2rem";
}
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
화면에 있는 파란색 버튼을 클릭하면, querySelector() 메서드가 클래스명이 "awesome-para"인 첫 번째 단락 요소를 찾아내고, 해당 요소의 글자 색상이 빨간색(#db133a)으로, 글자 크기가 1.2rem으로 변경됩니다.
핵심 포인트
- querySelector()는 조건에 맞는 첫 번째 요소 하나만 반환합니다.
- 여러 개의 일치하는 요소를 모두 가져오려면 querySelectorAll() 메서드를 사용해야 합니다.
- 일치하는 요소가 존재하지 않으면 null이 반환되므로, 반환값 사용 전 null 여부를 확인하는 것이 안전합니다.
- ID 선택자로 단일 요소를 찾을 때는 getElementById()보다 성능이 다소 느릴 수 있지만, 복잡한 CSS 선택자를 그대로 활용할 수 있다는 장점이 있습니다.