JavaScript에서 요소 그룹 가져오기

이전 강의들에서 우리는 querySelector 메서드를 사용하여 페이지의 한 요소를 가져왔습니다. 이제는 요소 그룹을 가져오고 여러 요소에 대해 한 번에 어떤 작업을 수행하는 방법을 배울 시간입니다.

이를 위해 querySelectorAll 메서드가 있습니다. 이 메서드는 CSS 선택자에 맞는 모든 태그를 요소 배열 형태로 가져옵니다. 발견된 요소들에 대해 무언가를 하려면, 얻은 배열을 작업해야 합니다. 예를 들어, 반복문으로 배열을 순회하고 반복문 내에서 각 요소별로 어떤 작업을 수행할 수 있습니다.

예를 들어, 클래스가 www인 단락이 주어졌다고 가정해 봅시다:

<p class="www">text1</p>
<p class="www">text2</p>
<p class="www">text3</p>

이 단락들의 배열을 가져와 반복문으로 순회하고, 반복문 내에서 발견된 단락들의 텍스트를 콘솔에 출력해 봅시다:

let elems = document.querySelectorAll('.www');

for (let elem of elems) {
	console.log(elem.textContent);
}

이제 각 단락 텍스트의 끝에 느낌표를 추가해 봅시다:

let elems = document.querySelectorAll('.www');

for (let elem of elems) {
	elem.textContent = elem.textContent + '!';
}

단락들과 버튼이 주어져 있습니다. 버튼을 클릭했을 때 모든 단락을 찾아 반복문으로 순회하고 각 단락의 텍스트를 'text' 값으로 설정하세요.

텍스트가 있는 단락들과 버튼이 주어져 있습니다. 버튼을 클릭했을 때 각 단락 텍스트의 끝에 해당 단락의 순서 번호를 작성하세요.

숫자가 있는 입력창들, 단락, 그리고 버튼이 주어져 있습니다. 버튼을 클릭했을 때 입력창들의 숫자 합계를 구하고 이 합계를 단락의 텍스트에 작성하세요.