여러 개의 태그가 있을 때, 문서상의 순서를 기준으로 각 태그의 내부 텍스트(innerHTML)를 순차적으로 변경하고 싶다면 document.querySelectorAll() 메서드를 활용하면 됩니다.
핵심 원리
querySelectorAll()은 지정한 선택자와 일치하는 모든 요소를 NodeList 형태로 반환합니다. 이 NodeList는 문서에 나타난 순서대로 정렬되어 있기 때문에, 반복문과 카운터 변수를 함께 사용하면 각 요소에 순번을 부여하듯 내용을 변경할 수 있습니다.
예제 코드
아래는 버튼을 클릭하면 세 개의 <p> 태그에 순서 번호가 자동으로 입력되는 전체 예제입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<body>
<p class="numberDemo">My Paragraph</p>
<p class="numberDemo">My Paragraph</p>
<p class="numberDemo">My Paragraph</p>
<button id="orderDemo">클릭하여 단락 순서 정렬하기</button>
</body>
<script>
document.getElementById('orderDemo')
.addEventListener('click', function (e) {
var allHTMLValues = document.querySelectorAll('.numberDemo');
var counter = 1;
for (temp of allHTMLValues) {
temp.innerText = '이 단락은 ' + (counter) + '번째 순서입니다';
counter = counter + 1;
}
});
</script>
</html>코드 설명
동작 방식을 단계별로 살펴보면 다음과 같습니다.
1. 이벤트 등록: getElementById()로 버튼을 선택한 뒤, addEventListener()로 클릭 이벤트 리스너를 등록합니다.
2. 요소 선택: querySelectorAll('.numberDemo')를 호출하여 numberDemo 클래스를 가진 모든 <p> 태그를 문서 순서대로 가져옵니다.
3. 반복 처리: for...of 문으로 각 요소를 순회하면서 innerText에 카운터 값을 포함한 새 텍스트를 할당하고, counter를 1씩 증가시킵니다.
실행 방법
위 프로그램을 실행하려면 파일 이름을 "anyName.html(index.html)"로 저장합니다. 그런 다음 Visual Studio Code 편집기에서 해당 파일을 마우스 오른쪽 버튼으로 클릭하고 "Open with Live Server" 옵션을 선택하면 브라우저에서 바로 확인할 수 있습니다.
실행 결과
페이지를 처음 열면 다음과 같이 세 개의 단락이 기본 텍스트 상태로 표시됩니다.
버튼을 클릭하면 각 단락이 문서 순서에 따라 아래처럼 번호가 매겨진 시퀀스로 변경됩니다.
마무리
이처럼 querySelectorAll()과 반복문만 활용해도 DOM 요소들에 순서 기반의 동적 변경을 손쉽게 적용할 수 있습니다. 목록 자동 번호 매기기, 단계별 안내 표시 등 다양한 UI 시나리오에 응용해 보세요.