자바스크립트로 DOM 요소를 필터링하여 특정 조건에 맞는 요소만 선택하고 조작하는 것은 웹 개발에서 매우 일반적인 작업입니다. 이 기사에서는 DOM 요소를 필터링하기 위한 몇 가지 기술을 살펴 보겠습니다.

getElementById를 사용한 단일 요소 필터링

document.getElementById() 메서드를 사용하여 특정 ID를 가진 단일 요소를 선택할 수 있습니다.

let element = document.getElementById('myElementId');

querySelector를 사용한 요소 필터링

CSS 선택자를 사용하여 요소를 선택하는 querySelector 메서드를 사용하여 특정 클래스 또는 태그를 가진 요소를 선택할 수 있습니다.

let element = document.querySelector('.myClass');

querySelectorAll을 사용한 여러 요소 필터링

querySelectorAll 메서드를 사용하면 CSS 선택자에 해당하는 모든 요소를 선택할 수 있습니다.

let elements = document.querySelectorAll('div.myClass');

필터링된 요소에 이벤트 리스너 추가하기

이벤트 리스너를 특정 DOM 요소에 추가할 때 필터링된 요소를 사용하여 작업할 수 있습니다.

document.querySelectorAll('button').forEach(button => {
  button.addEventListener('click', () => {
    // 클릭 이벤트 핸들러 추가
  });
});

DOM 요소를 필터링하여 선택 및 조작하는 방법을 알아보았습니다. 이 기술들은 웹 개발에서 매우 유용하며 실제 프로젝트에서 적용될 수 있습니다.

더 많은 정보를 원하시면 MDN web docs를 참고하세요.