DOM이란 무엇인가?
DOM은 Document Object Model의 약자로, 웹 페이지의 HTML이나 XML 문서를 트리 구조의 객체로 표현한 모델입니다. 브라우저는 HTML 문서를 로드한 후 이를 파싱하여 메모리에 적재하고, 이 구조를 통해 웹 페이지의 내용과 스타일을 동적으로 수정할 수 있게 해줍니다. DOM을 사용하면 웹 페이지의 요소를 자바스크립트로 조작하여 페이지를 실시간으로 변경할 수 있습니다.
DOM의 구조: 트리 형식의 객체 모델
DOM은 트리 구조로 표현됩니다. 이 트리의 최상위 노드는 <html> 요소이며, 그 아래로 <head>, <body>, <div>, <p> 등 다양한 HTML 요소들이 계층적인 관계를 형성합니다. 각 HTML 요소는 노드(Node)라는 객체로 변환되어 트리 구조에 배치됩니다.
- HTML 요소는 DOM 트리에서 엘리먼트 노드로 변환됩니다.
- HTML 속성은 애트리뷰트 노드로 변환됩니다.
- 텍스트는 텍스트 노드로 변환됩니다.
이처럼, DOM은 HTML 문서를 프로그램에서 사용할 수 있는 객체 지향적 모델로 변환하여 자바스크립트로 다룰 수 있게 만듭니다.
DOM과 자바스크립트: 동적 웹 페이지 구현
DOM은 자바스크립트와 함께 사용되어 웹 페이지를 동적으로 변경하는 데 핵심적인 역할을 합니다. 자바스크립트를 사용하면 DOM에 접근하여 다음과 같은 작업을 할 수 있습니다:
- HTML 요소 추가, 수정, 삭제
- 요소의 속성 수정 (예: class, id, style 속성)
- 이벤트 리스너 등록 (클릭, 마우스오버 등)
예를 들어, 자바스크립트를 사용하여 페이지가 로드될 때 새로운 <h1> 요소를 생성하고, 이를 웹 페이지의 <body>에 추가할 수 있습니다.
<script>
window.onload = function() {
var heading = document.createElement("h1");
var text = document.createTextNode("Welcome to my website!");
heading.appendChild(text);
document.body.appendChild(heading);
};
</script>위의 코드는 자바스크립트를 사용하여 웹 페이지에 동적으로 제목을 추가하는 방법을 보여줍니다. 이렇게 DOM을 수정함으로써, 페이지는 동적이고 상호작용적인 요소를 갖추게 됩니다.
HTML -> DOM, CSS -> CSSOM, Render Tree
웹 페이지가 브라우저에서 어떻게 렌더링되는지 이해하는 것은 매우 중요합니다. DOM은 HTML을 트리 구조로 변환하지만, CSS도 웹 페이지 렌더링에 중요한 역할을 합니다. CSS는 **CSSOM (CSS Object Model)**으로 변환되어, 각 HTML 요소에 적용되는 스타일을 정의합니다.
- DOM: HTML 문서를 트리 구조로 표현한 객체 모델
- CSSOM: CSS 스타일 시트를 트리 구조로 표현한 객체 모델
이 둘은 결합되어 **렌더 트리(Render Tree)**를 형성합니다. 렌더 트리는 화면에 표시되어야 하는 요소만 포함하고, display: none으로 숨겨진 요소는 제외됩니다. 브라우저는 렌더 트리를 기반으로 각 요소의 크기와 위치를 계산한 뒤, 최종적으로 화면에 렌더링합니다.
렌더링 과정:
- HTML -> DOM 트리
- CSS -> CSSOM 트리
- DOM과 CSSOM 결합 -> Render Tree
- 렌더 트리를 바탕으로 위치와 크기 계산 후, 화면에 표시
DOM의 중요성: 웹 페이지의 동적 조작
DOM은 웹 페이지의 모든 요소를 동적으로 조작할 수 있게 해주는 중요한 도구입니다. DOM을 통해 웹 페이지를 실시간으로 업데이트하거나, 사용자의 입력에 따라 다양한 상호작용을 구현할 수 있습니다.
예를 들어, 사용자가 버튼을 클릭하면 페이지의 스타일을 변경하거나, 새로운 콘텐츠를 추가하는 등의 동적 변화를 구현할 수 있습니다. 자바스크립트와 DOM은 상호작용을 가능하게 하고, 사용자 경험을 향상시킵니다.
DOM을 이해하는 비유: 자바스크립트가 조작하는 '관절 인형'
DOM은 자바스크립트가 움직일 수 있는 관절 인형과 같습니다. 자바스크립트는 DOM을 통해 웹 페이지의 각 요소를 마치 인형처럼 조작하여 페이지의 구조와 내용을 변경합니다. 이 과정을 통해 웹 페이지는 동적이고 인터랙티브한 형태로 변화합니다.
DOM과 함께 사용하는 주요 메서드와 프로퍼티
웹 개발에서 자주 사용되는 DOM 메서드와 프로퍼티는 다음과 같습니다:
- document.getElementById(id): 특정 id를 가진 요소를 찾습니다.
- document.getElementsByTagName(name): 특정 태그명을 가진 요소를 찾습니다.
- document.createElement(tagName): 새로운 HTML 요소를 생성합니다.
- element.setAttribute(attributeName, value): 요소의 속성을 설정합니다.
- element.addEventListener(event, function): 이벤트 리스너를 추가합니다.
결론: DOM은 웹 개발의 핵심
DOM은 웹 페이지의 모든 요소를 동적으로 조작할 수 있게 해주는 핵심 인터페이스입니다. 자바스크립트와 함께 사용하여 HTML 문서의 구조를 실시간으로 수정하고, 스타일을 적용하며, 상호작용을 구현할 수 있습니다. 웹 페이지는 단순히 HTML로 구성된 문서가 아니라, DOM을 통해 동적으로 변화할 수 있는 생동감 있는 콘텐츠가 됩니다.
DOM을 이해하고 활용하는 것은 웹 개발의 기본이며, 현대적인 웹 페이지의 인터랙티브함을 구현하는 핵심 요소입니다.
- DOM은 웹 페이지의 HTML 요소를 동적으로 조작할 수 있게 해주는 객체 모델입니다.
- DOM 트리는 HTML 문서를 객체로 변환하여 자바스크립트에서 조작할 수 있게 합니다.
- CSSOM과 결합하여 렌더 트리를 생성하고, 브라우저는 이 트리를 기반으로 화면을 렌더링합니다.
- DOM을 통해 웹 페이지의 동적 변경과 상호작용을 구현할 수 있습니다.
[출처]
https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction