DOM이란 무엇인가?

현대 웹에서 자바스크립트가 활약하는 무대는 바로 DOM(Document Object Model)입니다. DOM은 웹 문서 구조를 계층적인 트리로 표현한 개념으로, 자바스크립트가 직접 웹 페이지의 요소를 선택하고, 내용을 바꾸고, 스타일을 제어하며, 동적으로 구조를 변경할 수 있게 해줍니다.

DOM 요소 다루기

웹 페이지의 요소에 접근하기 위해서는 getElementById, querySelector, getElementsByClassName 등 다양한 선택자를 사용합니다. 선택한 요소의 속성이나 텍스트, 혹은 스타일을 바꾸려면 해당 객체의 프로퍼티나 메서드를 이용하면 됩니다. 예를 들어, 텍스트를 바꾸려면 element.textContent = "새 텍스트"처럼 직접 대입할 수 있습니다.

이벤트 처리의 기본

DOM의 진정한 힘은 사용자의 다양한 상호작용에 반응하는 데에서 나옵니다. 버튼 클릭, 키보드 입력, 마우스 이동 등 웹 페이지에서 발생하는 각종 이벤트는 이벤트 핸들러 함수를 통해 제어할 수 있습니다. 이벤트 핸들러는 보통 addEventListener 메서드를 이용해 원하는 요소에 연결합니다. 예를 들어, 버튼 클릭 시 동작하도록 하려면 다음과 같이 작성합니다.

const button = document.querySelector('#my-btn');
button.addEventListener('click', function(event) {
  alert('버튼이 눌렸습니다!');
});

이렇게 하면 사용자의 액션에 즉각적으로 반응할 수 있는 동적인 웹 페이지를 만들 수 있습니다.

이벤트 전파: 버블링과 캡처링

이벤트 시스템의 중심에는 '전파'라는 개념이 자리합니다. 어떤 요소에서 이벤트가 시작되면, 그 이벤트는 특정 방향으로 계층 구조를 따라 전달됩니다. 하위에서 상위로 올라가는 것을 '버블링', 상위에서 하위로 내려오는 것을 '캡처링'이라고 부릅니다. 기본적으로 대부분의 이벤트는 버블링 방식으로 동작하지만, 필요하다면 캡처링을 활용할 수도 있습니다. 예를 들어, addEventListener에 세 번째 인자를 true로 주면 캡처링 모드에서 이벤트를 처리할 수 있습니다.

이벤트 위임

어떤 경우에는 목록이나 동적으로 생성되는 많은 요소들에게 일일이 이벤트 핸들러를 붙이는 대신, 상위 요소 하나에만 핸들러를 부여해 자식 요소의 이벤트를 한 번에 처리할 수 있습니다. 이를 '이벤트 위임'이라 하며, 효율성과 유지보수성을 모두 챙길 수 있는 중요한 패턴입니다. 대표적으로 다음과 같이 사용할 수 있습니다.

document.querySelector('ul').addEventListener('click', function(event) {
  if(event.target.tagName === 'LI') {
    alert(event.target.textContent + ' 클릭!');
  }
});

실무를 위한 팁

이벤트 객체에는 다양한 정보가 담겨 있어 상황에 맞는 활용이 가능합니다. 예를 들어, event.target은 실제로 이벤트가 발생한 요소를 가리키고, event.type은 이벤트의 종류를 확인할 수 있습니다. 필요에 따라 이벤트의 전파를 막거나 기본 동작을 취소해야 할 때 event.stopPropagation()이나 event.preventDefault()를 적절히 사용할 줄 아는 것도 중요합니다.

이처럼 DOM과 이벤트 시스템을 중급 수준에서 이해하면, 웹 인터페이스를 효과적으로 제어하고, 실제 서비스 품질을 한 단계 높일 수 있습니다.