웹 개발에서 DOM(Document Object Model)은 HTML 문서를 조작하고 화면에 콘텐츠를 표시하는 데 중요한 역할을 합니다. 이 글에서는 DOM의 개념, 동작 방식, 그리고 Layout Trees가 어떻게 화면 렌더링과 연결되는지 알아보겠습니다.
1. DOM이란 무엇인가?
DOM은 웹 페이지의 HTML 또는 XML 문서를 객체로 표현하는 프로그래밍 인터페이스입니다. 이를 통해 JavaScript를 사용하여 문서 구조, 콘텐츠, 그리고 스타일을 동적으로 변경할 수 있습니다.
- HTML 코드
<html>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph.</p>
</body>
</html>
- DOM 구조
Document
└── html
├── body
├── h1
└── p
DOM은 트리 구조로 구성되며, 각 HTML 태그는 노드(node)로 표현됩니다. 이를 통해 프로그래밍 언어(JavaScript 등)로 문서를 쉽게 조작할 수 있습니다.
2. DOM의 주요 개념
- 노드(Node)
DOM의 각 요소(HTML 태그, 텍스트, 속성 등)는 노드로 표현됩니다. 노드는 다음과 같이 분류됩니다:- Element Node: HTML 요소를 나타냅니다. (예: <div>)
- Text Node: HTML 요소 내부의 텍스트를 나타냅니다. (예: "Hello, World!")
- Attribute Node: HTML 속성을 나타냅니다. (예: class="example")
- DOM 조작
JavaScript를 사용해 DOM을 동적으로 변경할 수 있습니다.
// 요소 선택
const heading = document.querySelector('h1');
// 콘텐츠 변경
heading.textContent = 'Welcome to the DOM!';
// 스타일 변경
heading.style.color = 'blue';
3. Layout Trees란 무엇인가?
Layout Trees는 웹 브라우저가 DOM과 CSSOM(CSS Object Model)을 결합하여 페이지 레이아웃을 생성하는 과정에서 만들어집니다.
- DOM: 문서의 구조(HTML)를 나타냅니다.
- CSSOM: 스타일 정보를 나타냅니다.
- Layout Tree: DOM과 CSSOM을 기반으로 화면에 표시될 요소만을 포함한 구조입니다.
4. DOM, CSSOM, 그리고 Layout Tree의 관계
브라우저가 HTML과 CSS를 렌더링할 때 다음 단계를 거칩니다:
- HTML 파싱 → DOM 생성
브라우저는 HTML 파일을 읽어 DOM 트리를 만듭니다. - CSS 파싱 → CSSOM 생성
CSS 파일을 읽어 CSSOM을 만듭니다. - DOM + CSSOM → Render Tree 생성
DOM과 CSSOM을 결합하여 Render Tree를 생성합니다. 여기서 **보이지 않는 요소(예: display: none 설정된 요소)**는 제외됩니다. - Layout
Render Tree를 기반으로 각 요소의 위치와 크기를 계산합니다. - Painting
요소를 픽셀로 그려 화면에 출력합니다.
5. Layout Tree의 중요한 특징
- 효율적인 렌더링
Layout Tree는 보이지 않는 요소를 제외하므로, 브라우저는 화면에 필요한 정보만 처리합니다. - 동적 DOM 변경
DOM을 변경하면 Layout Tree가 업데이트되며, 이를 Reflow 또는 Repaint라 부릅니다.- Reflow: 레이아웃을 다시 계산해야 하는 경우.
- Repaint: 요소의 시각적 속성(색상, 배경 등)이 변경된 경우.
const box = document.querySelector('.box');
box.style.width = '200px'; // Reflow 발생
box.style.backgroundColor = 'red'; // Repaint 발생
6. DOM과 Layout Tree 활용 예시
2. 동적 콘텐츠 생성
JavaScript로 DOM을 생성하여 콘텐츠를 동적으로 추가할 수 있습니다.
const container = document.querySelector('.container');
const newElement = document.createElement('div');
newElement.textContent = 'I am dynamically created!';
container.appendChild(newElement);
2. 레이아웃 최적화
DOM 조작이 Layout Tree에 불필요한 영향을 주지 않도록 최적화합니다.
- DOM 변경을 최소화하기 위해 DocumentFragment를 사용합니다.
const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
const div = document.createElement('div');
div.textContent = `Item ${i}`;
fragment.appendChild(div);
}
document.body.appendChild(fragment);7. 결론
DOM은 웹 문서의 구조를 프로그래밍적으로 조작할 수 있게 해주는 핵심 개념이며, Layout Tree는 화면 렌더링의 효율성을 높이는 중요한 과정입니다. DOM과 Layout Tree의 원리를 이해하면 더 나은 성능과 사용자 경험을 제공하는 웹 애플리케이션을 개발할 수 있습니다.
출처
- https://www.digitalocean.com/community/tutorials/introduction-to-the-dom
- https://www.guru99.com/how-to-use-dom-and-events-in-javascript.html
'개발 언어 > 자바스크립트 33가지 개념' 카테고리의 다른 글
| [JavaScript 33가지 개념] 12. 비트 연산자, 형식화 배열, 버퍼(배열) (0) | 2024.10.25 |
|---|---|
| [JavaScript 33가지 개념] 11. 자바스크립트 엔진 (1) | 2024.10.25 |
| [JavaScript 33가지 개념] 10. setTimeout, setInterval, requestAnimationFrame (0) | 2023.03.12 |
| [JavaScript 33가지 개념] 09. 메시지 큐와 이벤트 루프 (0) | 2023.03.12 |
| [JavaScript 33가지 개념] 08. IIFE, Modules, Namespaces (0) | 2023.03.02 |
댓글