JavaScript에서 document.querySelectorAll() 메서드를 호출하면 선택된 요소들이 NodeList 형태로 반환됩니다. NodeList는 배열처럼 인덱스로 접근할 수 있고 length 속성도 가지고 있지만, 엄밀히 말해 배열이 아니기 때문에 map(), filter(), reduce() 같은 배열 메서드를 직접 사용할 수 없습니다. 따라서 배열의 다양한 메서드를 활용하려면 먼저 NodeList를 실제 배열로 변환해야 합니다.
방법 1 – Array.from() 사용하기
Array.from()은 유사 배열 객체(array-like object)나 반복 가능한 객체(iterable)를 받아 새로운 배열을 만들어 반환하는 정적 메서드입니다. NodeList는 iterable이므로 아래와 같이 한 줄로 간단하게 변환할 수 있습니다.
const arr = Array.from(document.querySelectorAll('.sample'));
방법 2 – 전개 연산자(Spread Operator) 사용하기
ES6에서 도입된 전개 연산자(...)를 사용하면 대괄호 안에서 NodeList를 그대로 펼쳐 새로운 배열을 만들 수 있습니다. 코드가 더 짧고 직관적이어서 실무에서도 널리 사용되는 방식입니다.
const arr = [...document.querySelectorAll('.sample')];
전체 예제 코드
다음은 버튼을 클릭하면 NodeList를 배열로 변환한 뒤, 화면에 있는 모든 div 요소의 배경색을 빨간색으로 변경하는 예제입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.sample {
display: inline-block;
font-size: 20px;
font-weight: 500;
color: white;
background-color: blue;
padding: 10px;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<h1>노드 목록(NodeList)을 배열로 변환하기</h1>
<div class="sample">1</div>
<div class="sample">2</div>
<div class="sample">3</div>
<div class="sample">4</div>
<br>
<button class="Btn">여기를 클릭하세요</button>
<h3>위 버튼을 클릭하면 모든 div 요소의 색상이 변경됩니다.</h3>
<script>
let sampEle = document.querySelectorAll('.sample');
let BtnEle = document.querySelector('.Btn');
BtnEle.addEventListener('click', () => {
Array.from(sampEle).forEach(item => {
item.style.backgroundColor = 'red';
});
});
</script>
</body>
</html>
실행 결과
페이지를 처음 열면 파란색 배경의 숫자가 적힌 div 요소 네 개가 표시됩니다.
'여기를 클릭하세요' 버튼을 누르면 −
Array.from()으로 변환된 배열에 forEach()가 실행되어 네 개의 div 요소가 모두 빨간색으로 바뀐 것을 확인할 수 있습니다.
참고: 최신 브라우저에서는?
현대 브라우저의 NodeList는 자체적으로 forEach() 메서드를 지원합니다. 단순 반복 처리만 필요하다면 변환 없이 nodeList.forEach()를 바로 사용해도 됩니다. 다만 map(), filter(), sort() 등 나머지 배열 메서드까지 활용하려면 위에서 소개한 Array.from() 또는 전개 연산자로 변환하는 것이 좋습니다.