[33-js-concepts] 13. DOM과 Layout Trees (DOM and Layout Trees)

Before DOM Introduction

웹 개발은 웹 브라우저와 밀접한 연관이 있습니다.

모든 서비스는 사실 웹 브라우저를 바탕으로 실행이 된다고 봐도 과언이 아닙니다.

이 브라우저와 관련된 객체 집합을 브라우저 객체 모델(Browser Object Model, BOM)이라고 하고, BOM을 이용해서 브라우저와 관련된 기능을 구성합니다.

DOM은 이 BOM 중 하나입니다.

 

DOM이란?

DOM은 웹 브라우저로부터 HTML, XML을 표현하기 위한 인터페이스를 제공합니다.

이러한 인터페이스는 웹의 구조나 스타일을 조작할 수 있게 도와줍니다.

여기서 DOM은 문서 객체 모델(Document Object Model)의 약자입니다.

여기서 Model은 문서 객체를 '인식하는 방식' 을 의미합니다.

 

DOM에 대해서 좀 더 직관적으로 정의를 내리자면 다음과 같습니다.

넓은 의미로는 웹 브라우저가 HTML 페이지를 인식하는 방식

좁은 의미로는 document 객체와 관련된 객체 집합

 

DOM의 구조

DOM은 자료구조 중 트리(Tree) 형식을 취하고 있습니다.

The HTML DOM is a standard for how to get, change, add, or delete HTML elements. (by w3school)

 

앞으로 자주 접하게 될 주요 요소는 다음과 같습니다.

• Document: 모든 HTML 문서를 다룹니다.
• Elements(ex. TITLe, H1): HTML 또는 XML 안에 있는 모든 태그들을 DOM 요소로 변환합니다.
• Text: 태그의 내용입니다.

 

DOM에서 가장 중요한 규칙은 문서를 트리 구조로 표시하는 것입니다.

트리 구조는 HTML에서 문서를 가장 잘 표현하는 방법이기 때문입니다.

우리는 이러한 형태를 노드 트리라고 부릅니다.

 

위 요소에 대해서 조금 더 자세히 살펴보면 다음과 같습니다.

 

DOM 구조로 얻는 이점

바로 사용자에 의해서 얼마든지 페이지의 데이터를 업데이트하거나, 레이아웃 등을 refresh의 과정 없이 커스터마이징할 수 있습니다.

 

DOM의 문제점

한 문장으로 요약하자면 DOM은 동적 UI에 최적화되어 있지 않습니다.

DOM 자체를 읽고 쓸 때의 성능은 자바스크립트 객체를 처리할 때 성능과 비교해서 크게 차이가 나지 않습니다.

단, 브라우저 단에서 DOM 변화가 일어나면 브라우저가 CSS를 다시 연산한 다음 레이아웃을 구성하고 웹페이지를 다시 그리는 과정에서 시간이 소요됩니다.

HTML 마크업을 시각적인 형태로 변환하는 것은 웹 브라우저의 주 역할이기 때문에, 이를 처리할 때 컴퓨터 자원을 사용하게 됩니다.

 

이 문제를 해결하기 위해서 최소한의 DOM 조작을 통해서 작업을 처리하는 방식으로 개선할 수는 있습니다.

React는 가상 DOM 방식을 사용함으로써 DOM 업데이트를 추상화해서 DOM 처리 횟수를 최소화하는 방식을 취하고 있습니다.

 

DOM in JavaScript

문서 객체가 생성되는 방식은 크게 두 가지로 나누어 볼 수 있습니다.

1. 웹 브라우저가 HTML 페이지에 적혀 있는 태그를 읽으면 생성
2. 원래 HTML 페이지에 없던 문서 객체를 JS를 이용해서 생성

1번을 문서 객체를 정적으로 생성한다고 하고, 2번의 경우를 문서 객체를 동적으로 생성한다고 표현합니다.

 

DOM을 다루는 API (실습)

getElementsByTagName()

특정 태그를 가진 요소에 바로 접근할 수 있습니다.

getElementById()

특정 아이디를 가진 요소에 바로 접근할 수 있습니다.

getElementsByClassName()

특정 클래스를 가진 요소에 바로 접근할 수 있습니다.

 

createElement()

원하는 요소를 생성할 수 있습니다.

appendChild()

선택된 노드에 자식으로 요소를 추가할 수 있습니다.

removeChild()

 특정 요소 삭제가 가능합니다.

getAttribute()

 해당 요소의 속성값을 얻을 수 있습니다.

setAttribute()

원하는 노드의 속성 값 바꾸기 가능합니다.