9장: 문서 객체 모델(DOM) 다루기

자바스크립트와 DOM, 웹과 소통하기 위한 첫 문

웹페이지가 단순히 정보를 보여주기만 했던 시절이 있었습니다. 하지만 오늘날의 웹사이트는 사용자의 행동에 반응하고, 필요에 따라 실시간으로 화면의 구성요소가 바뀌곤 합니다. 이 변화의 중심에는 바로 자바스크립트와 DOM(Document Object Model)이 있습니다.

DOM이란 웹 문서를 프로그램이 이해할 수 있도록 트리 구조의 객체로 나타낸 모습입니다. HTML로 작성된 페이지가 웹 브라우저에서 해석되는 순간, 각 태그와 내용이 DOM이라는 구조로 변환됩니다. 이렇게 만들어진 DOM은 자바스크립트가 언제든 읽고, 수정하고, 삭제할 수 있게 해 줍니다.

브라우저와의 연결: document 객체

자바스크립트에서는 웹페이지 전체를 대표하는 document라는 객체를 통해 DOM에 접근합니다. 마치 비밀의 문을 여는 열쇠와도 같죠. 예를 들어, 특정 버튼을 찾고 싶을 땐 아래와 같습니다:

document.getElementById('myButton');

이렇게 찾은 요소를 이용해 텍스트를 바꾸거나, 내용에 변화를 줄 수 있습니다.

DOM 요소 선택의 다양한 방법

초보자에게 친숙한 getElementById 외에도, 클래스 이름, 태그 이름, CSS 선택자를 활용한 다양한 접근 방식이 존재합니다. 예를 들어 클래스가 'notice'인 요소 모두를 가져오고 싶다면 다음과 같이 쓸 수 있습니다:

document.getElementsByClassName('notice');
document.querySelectorAll('.notice');

이 방법을 익혀두면, 이후에 등장할 다양한 웹 UI 효과나 동적 콘텐츠 처리에 큰 힘이 됩니다.

HTML을 자바스크립트로 바꾼다: DOM 조작

DOM의 진짜 매력은 정보를 읽어오는 데에만 그치지 않습니다. 웹페이지의 텍스트, 속성, 새로운 요소 추가, 삭제 등 실시간 변화가 가능합니다. 예를 들어 어떤 문단의 내용을 바꾸고 싶다면 다음처럼 작성할 수 있습니다:

const pEl = document.getElementById('greeting');
pEl.innerText = '안녕하세요, DOM 조작의 첫 단계입니다!';

또한 새로 만든 노드를 기존 요소에 추가할 때는 createElement, appendChild 등을 활용합니다:

const newDiv = document.createElement('div');
newDiv.innerText = '새로운 영역';
document.body.appendChild(newDiv);

DOM에서 시작하는 동적 웹의 세계

DOM을 이해하고, 자바스크립트로 원하는 부분을 조작할 수 있게 되면 웹페이지의 모든 부분이 내 마음대로 움직이기 시작합니다. 검색창의 실시간 자동 완성, 버튼을 누르면 목록이 늘어나는 UI, 입력값 검증 등 실제 웹 서비스에서 마주치는 거의 모든 동적 기능의 핵심에는 DOM이 자리잡고 있습니다.

처음엔 다소 생소하게 느껴질 수 있습니다. 하지만 DOM 구성을 머릿속에 트리 구조로 그려보고, 다양한 선택자와 조작법을 익히다 보면 웹 브라우저가 내 손 안에 들어오는 경험을 할 수 있습니다. 무엇보다 브라우저와 대화를 시작하는 첫 관문이 바로 이 DOM이라는 사실, 꼭 기억해두세요.