TIL 10 | DOM (Document Object Model)

Gom·2021년 1월 7일

DOM JavaScript TIL

JavaScript

목록 보기

7/22

DOM이란 무엇인가

Document Object Model

DOM이란 HTML 문서를 위한 프로그래밍 인터페이스이다.

DOM은 HTML 및 XML문서에 대한 인터페이스이다. 문서 요소들을 객체화하여 프로그램이 문서 구조, 스타일 및 내용을 조작할 수 있도록 API를 제공한다.

DOM의 역할과 원리

1. HTML 내용을 브라우저에 표시하기 위해 필요하다.

HTML 파일이 우리 눈에 보여지려면
문서를 읽어들이고 어떤 내용을 페이지에 보여줄 지 결정한 다음 표시하는 과정을 거쳐야한다.
전문 용어로 파싱과 렌더링을 수행한다.
위 절차중 어떤 내용을 페이지에 렌더링할지 결정할 때 DOM과 CSSOM이라는 두 모델이 필요하다.
정확히는 뷰 포트에 렌더링할 내용을 결정할 때 DOM이 필요하고 결정된 내용으로 렌더링을 수행하면 웹 페이지에 HTML 요소가 보이게 된다.

DOM : HTML 요소들의 구조화된 표현
CSSOM : 스타일 정보의 구조화된 표현

2. 문서 요소를 프로그래밍 언어로 조작하기 위해 필요하다.

DOM(Document Object Model)은 '문서객체모델'이라는 이름과 같이 단순 텍스트로 구성된 HTML 문서를 객체 모델로 변환한다. 덕분에 프로그램이 해당 요소에 액세스할 수 있게 되어 수정이 가능해진다. DOM은 브라우저가 자바스크립트를 구현할 때 시작된 개념으로 일반적으로 자바스크립트에서의 활용을 의미하지만 Python 등 모든 언어에서 쓰일 수 있다.

바로잡기

DOM에서 혼동되는 개념을 바로잡는데 고우영님의 블로그가 큰 도움이 되었다.

1. DOM은 HTML이 아니다.

DOM은 HTML 문서로부터 생성되지만 그 둘이 항상 동일한 것은 아니다. 두가지 케이스가 있다.

[작성된 HTML 문서가 유효하지 않을 때]
DOM은 유효한 HTML 문서의 인터페이스다. HTML 코드에 유효하지 않은 규칙이 존재할 경우 올바르게 교정하여 DOM을 생성한다.

[자바스크립트에 의해 DOM이 수정될 때]
DOM은 자바스크립트에 의해 수정이 가능하도록 HTML 문서 내용을 자원화한 것이다. 만약 자바스크립트를 사용해 DOM에 새로운 노드를 추가한다면 해당 코드는 HTML 내용은 변경하지 않고 DOM만을 업데이트할 수도 있다.

2. DOM은 브라우저에 보이는 것이 아니다.

브라우저 뷰 포트에는 DOM와 CSSOM이 조합된 것(렌더트리)이 보여진다. 이 렌더트리에는 스크린에 그려져야 할 요소들만 포함되어 있으나 DOM에는 시각적으로 보이지 않는 요소도 포함하고 있다. (ex display : none 스타일 속성을 가진 요소)

3. DOM은 개발도구에서 보이는 것이 아니다.

개발도구의 요소 검사기는 DOM과 가장 가까운 근사치를 제공하나 CSS의 가상요소 등 DOM에 없는 추가정보를 포함하기도 한다. DOM은 오직 원본 HTML 문서로 만들어지고 요소에 적용되는 스타일을 포함하지 않기 때문에 가상요소는 DOM에 포함되지 않는다. (ex ::after)