HTML DOM의 querySelectorAll() 메서드는 매개변수로 전달된 CSS 선택자와 일치하는 문서 내 모든 요소를 NodeList 형태로 반환하는 메서드입니다. 단일 요소만 가져오는 querySelector()와 달리, 조건에 맞는 여러 개의 요소를 한 번에 다룰 수 있어 반복 처리에 매우 유용합니다.
문법(Syntax)
querySelectorAll() 메서드의 기본 문법은 다음과 같습니다.
document.querySelectorAll("CSS 선택자");매개변수에는 클래스(.class), 아이디(#id), 태그명 등 유효한 CSS 선택자 문자열을 지정할 수 있습니다.
예제(Example)
아래 예제는 querySelectorAll() 메서드를 활용해 페이지 내 모든 문단(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%;
}
.drop-down{
width:35%;
border:2px solid #fff;
font-weight:bold;
padding:8px;
}
.btn{
background:#0197F6;
border:none;
height:2rem;
border-radius:2px;
width:35%;
margin:2rem auto;
display:block;
color:#fff;
outline:none;
cursor:pointer;
}
.show{
font-size:1.5rem;
font-weight:bold;
}
</style>
</head>
<body>
<h1>DOM querySelectorAll() 메서드 데모</h1>
<p class="para">안녕하세요! 랜덤 텍스트가 담긴 문단입니다.</p>
<p class="para">멋진 문단입니다.</p>
<p class="para">저는 HTML의 <p> 요소입니다</p>
<button onclick="changeColor()" class="btn">모든 문단 스타일 변경하기</button>
<script>
function changeColor() {
var paraElements = document.querySelectorAll(".para");
paraElements.forEach((paraElement)=>{
paraElement.style.color="#db133a";
paraElement.style.fontSize="1.2rem";
});
}
</script>
</body>
</html>위 코드에서는 document.querySelectorAll(".para")를 사용해 para 클래스를 가진 모든 문단 요소를 선택한 뒤, forEach() 메서드로 각 요소를 순회하며 글자 색상과 크기를 변경하고 있습니다.
실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
파란색 버튼을 클릭하면 페이지에 있는 모든 문단 요소의 스타일이 한 번에 변경됩니다.
핵심 포인트
- querySelectorAll()은 조건에 일치하는 모든 요소를 NodeList로 반환합니다.
- 반환된 NodeList는 forEach()로 순회하여 각 요소를 개별적으로 제어할 수 있습니다.
- CSS 선택자 문법을 그대로 사용하므로 클래스, 아이디, 태그, 속성 선택자 등을 자유롭게 활용할 수 있습니다.