[javascript] DOM 요소 반복문으로 처리하기

12 Dec 2023

javascript

웹 페이지에서 DOM (Document Object Model) 요소를 다룰 때 종종 여러 요소를 한꺼번에 처리해야 할 때가 있습니다. 이때 반복문을 사용하여 효율적으로 처리할 수 있습니다. 이번 글에서는 JavaScript를 사용하여 DOM 요소를 반복문으로 처리하는 방법에 대해 알아보겠습니다.

1. DOM 요소 선택하기

DOM 요소를 반복문으로 처리하려면 먼저 해당 요소들을 선택해야 합니다. 이를 위해 querySelectorAll 메서드나 클래스명, 태그명 등과 같은 선택자를 활용하여 원하는 요소들을 선택합니다. 예를 들어, 다음과 같이 querySelectorAll 메서드를 사용하여 클래스명이 ‘item’인 요소들을 선택할 수 있습니다.

const elements = document.querySelectorAll('.item');

2. 반복문을 이용한 요소 처리

선택한 요소들을 배열 또는 유사 배열 객체로 다루기 위해서는 forEach나 일반적인 for 반복문을 사용할 수 있습니다. forEach를 사용하는 예제는 다음과 같습니다.

elements.forEach(element => {
  // 각 요소에 대한 처리 로직
  console.log(element.textContent);
});

또는 일반적인 for 반복문을 사용하여 처리할 수도 있습니다.

for (let i = 0; i < elements.length; i++) {
  // 각 요소에 대한 처리 로직
  console.log(elements[i].textContent);
}

3. 예제

아래는 간단한 예제 코드입니다. HTML에서 item 클래스명을 가진 여러 요소들을 선택하고, 각 요소의 텍스트 내용을 변경하는 예제입니다.

document.addEventListener('DOMContentLoaded', function() {
  const elements = document.querySelectorAll('.item');
  elements.forEach(element => {
    element.textContent = '변경된 내용';
  });
});

위 예제에서는 DOMContentLoaded 이벤트를 사용하여 페이지가 로드될 때 실행되도록 하였습니다. 선택한 요소들에 대해 forEach를 사용하여 각 요소의 텍스트 내용을 변경하고 있습니다.

결론

JavaScript를 사용하여 DOM 요소를 반복문으로 처리하는 방법에 대해 알아보았습니다. 이를 통해 여러 요소를 한꺼번에 다루는 효율적인 방법을 익힐 수 있습니다.

참고 문헌: