더북(TheBook)

여러 개의 태그를 선택하는 경우도 있습니다. 태그를 한꺼번에 선택하고 싶다면 document.querySelector() 메서드 대신 document.querySelectorAll() 메서드를 사용하면 됩니다.

버튼을 두 개 더 추가한 뒤에 document.querySelectorAll() 메서드를 사용해 보겠습니다.

<button>입력</button>
<button>버튼2</button>
<button>버튼3</button>
<script>
const $$buttons = document.querySelectorAll('button'); 
console.log($$buttons);
</script>

이번에는 버튼이 3개이므로 콘솔에 태그 3개가 동시에 표시됩니다. 태그 여러 개를 한 번에 표시하려고 배열을 사용한 것처럼 보이지만, 실제로는 배열이 아닙니다. NodeList라는 특수한 객체입니다. NodeList와 배열의 차이점은 나중에 설명하겠습니다. 이 책에서는 NodeList를 저장하는 변수명을 $$로 시작하도록 규칙을 정하겠습니다.

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.