🤔 DOM의 정의와 필요성
HTML의 목적은 오직 정보의 구조를 명시적으로 표현하는 것 뿐이다. 따라서 HTML만으로는 사용자와 상호작용하는 것은 불가능하다. 그래서 생겨난 것이 자바스크립트다.
하지만 가장 중요한 점을 짚고 넘어갈 필요가 있다. 바로 “자바스크립트는 HTML을 직접 수정할 수 있는가?” 이다. 결론부터 말하면 직접 수정할 수는 없고, 브라우저가 HTML을 해석해서 메모리에 올려 놓은 객체 구조를 조작하는 것이다. 이 객체 구조를 바로 DOM(Document Object Model)이라고 하는 것이다.
DOM은 브라우저가 HTML을 파싱해서 구성한 트리 형태의 객체 집합이다. 말로는 이해가 힘드니 예시를 들어보자.
<!doctype html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<h1>Hello World</h1>
<ul>
<li>HTML</li>
<li>JavaScript</li>
<li>DOM</li>
</ul>
</body>
</html>위와 같은 HTML 파일이 있다고 했을 때, 브라우저는 아래와 같이 DOM 트리를 생성한다.
위와 같이 구조화하는 과정을 자세히 뜯어보면,
-
HTML 문자열을 토큰으로 분할한다. (ex.
<h1>,</h1>,<body>와 같은 단위로 자름) -
토큰을 기반으로 노드라는 객체를 생성한다.
-
각 노드를 계층 구조의 트리로 연결한다.
이렇게 생성된 DOM 트리를 통해 자바스크립트는 원하는 DOM 요소를 가져와서 이벤트 리스너를 등록하고 내용을 조작할 수 있는 것이다. 명심하자. 이 모든 과정은 HTML 파일을 수정하는 게 아니라, 브라우저 메모리 상의 DOM 객체를 실시간으로 조작하는 것이다.
🛠️ DOM 구조와 조작 도구
이제 더 나아가보자. “DOM이란 무엇이냐” 라는 질문에 제대로 대답하기 위해서는 구조와 API로 나눠서 생각하는 과정이 필요하다. 이를 건물과 공구로 생각해보자.
-
건물: HTML을 해석해서 만들어진 DOM 구조
-
공구: DOM을 조작하기 위한 API 함수들
건물은 설계도에 따라 지어진 구조물이고, 공구는 이 건물을 유지보수, 리모델링하기 위한 도구라고 하자. 그렇다면 브라우저가 생성해낸 DOM 트리가 건물, 자바스크립트로 그 DOM을 다룰 때 사용하는 다양한 메서드들이 공구라고 생각하면 된다. 이 메서드(API)가 바로 브라우저에서 자바스크립트에게 제공하는 표준화된 조작 도구 모음집인 것이다.
아래 예시를 보자.
<body>
<h1 id="title">제목</h1>
<button>제목 바꾸기 버튼</button>
</body>일단 브라우저가 위 HTML 파일을 파싱해서 DOM 트리로 변환할 것이다. 여기까지가 구조인 것이다. 이 시점에 이 구조만 가지고는 아무 것도 할 수 없다. 당연하다. 아무 것도 시키지 않았으니까…
이제 버튼을 누르면 제목을 바꾸기 위해 DOM 구조에 접근해서 조작해야 한다. 이때 사용하는 것이 바로 공구, DOM API라는 것이다. 아래 자바스크립트 코드를 보자.
const h1 = document.getElementById('title');
const button = document.querySelector('button');
button.addEventListener("click", () => {
h1.textContent = '바뀐 제목입니다...';
});getElementById('title'), querySelector('button')로 아이디가 title인 요소와 button 태그인 요소를 DOM 트리에서 가져온다. 그리고 이벤트 리스너를 등록하고 h1.textContent = ...를 통해 노드의 텍스트 콘텐츠를 변경하는 것이다. 이와 같이 DOM 요소를 가져오고 조작하는 방법이 바로 DOM API라는 것이다.
이렇게 구조와 API로 분리해서 이해하는 것이 중요한 이유는 모든 DOM과 관련된 기능들이 모두 DOM 구조 위에서 DOM API를 사용해서 일어나는 일이기 때문이다. 구조를 모르면 조작 대상이 없고, API를 모르면 조작 대상을 조작할 수 없는 것이다.
