DOM이란?
Document Object Model의 약자이자 html문서에 대한 인터페이스로 스크립트 언어와 프로그래밍 언어를 통해 웹 문서를 쉽게 제어할 수 있게 하기 위해 문서를 객체화한 것을 말한다.
DOM 트리
웹 브라우저가 HTML 문서를 읽어 들이면 위에 그림처럼 Document 객체로 시작하는 DOM트리가 만들어 진다. 트리를 구성하는 각 요소들을 노드라고 부른다.
DOM Tree 순회는 preOrder로 이루어진다.
(left -> root -> right)
- 문서노드: document이자 최상위 노드를 의미한다. (DOM에 진입하기 위한 시작점)
- 요소노드: html의 태그를 의미한다.
- 속성노드: 요소노드(태그)의 속성들을 의미한다. ex )
href, alt등 - 텍스트 노드: 요소노드(태그)의 텍스트를 의미한다. (DOM 트리의 단말 노드)
흔히 하는 착각
HTML이 문서의 가장 최상위 노드라고 착각하는 경우가 있지만, 이는 잘못된 이해이다.
document.childNodes를 입력하면 아래 이미지와 같이 !DOCTYPE, Html 태그가 Nodelist에 담겨 반환된다.
이와 같이 우리가 평소에 사용하는 document.querySelector 처럼 앞에 document를 붙이는 이유는 document가 최상위 노드이기 때문이다.
"최상위 노드의 아래 요소들중 선택자에 맞는 조건의 요소를 찾아줘" 라는 말과 같다.
브라우저의 렌더링 과정
먼저 브라우저는 HTML를 읽고 파싱하여 DOM Tree를 구성한다. 이어 스타일 시트를 파싱하여 스타일 룰을 만들어 돔 요소에 스타일을 입혀 만들어 논다. 이과정을 Attachment 라고한다. 그렇게 DOM과 CSSOM의 결합으로 랜더트리(Render Tree)를 만들어 돔 노드의 위치를 정해준다. 그렇게 렌더 트리가 완성되면 트리를 통해 실제 화면에 그려준다.
랜더 트리 (Render Tree)
랜더 트리란 웹 페이지에 표시될 HTML 요소들과 CSS 스타일 요소들로 구성 된다. 브라우저는 DOM과 CSSOM이 결합하여 렌더트리를 만든다. 렌더트리는 웹 페이지에 나타낼 각 요소들의 위치를 계산하는데 사용되고 화면에 렌더링하는 요소들을 표현하고 그려질 그래픽을 계산한다.
- DOM: HTML 요소를 읽고 파싱한 것을 DOM Tree라 한다.
- CSSOM: CSS를 읽고 파싱한 것을 CSSOM Tree리 한다.
여기서 DOM이나 스타일이 수정 될 경우 위의 프로세스를 다시 반복 한다.
DOM 선택자
getElementById
- DOM에서 특정 id 값을 가진 엘리먼트를 반환한다.
- 찾는 결과가 없을 경우 null을 반환한다.
- id 값의 경우 여러개일 경우 첫 번째 id 값을 반환합니다.
<!-- id는 단 하나의 요소에만 지정해야 한다 -->
<h1 id="title">제목1</h1>document.getElementById("title"); // h1을 출력getElementsByClassName
- DOM에서 특정 class 명을 가진 엘리먼트들을 HTMLCollection으로 반환합니다.
<ul>
<li class="list list1">리스트1</li>
<li class="list list2">리스트2</li>
<li class="list list3">리스트3</li>
<li class="list list4">리스트4</li>
<li class="list list5">리스트5</li>
</ul>document.getElementsByClassName("list");
// class 명이 list인 모든 요소들을 HTMLCollection으로 출력getElementsByTagName
- 특정 태그명을 가진 엘리먼트들을 HTMLCollection으로 반환합니다.
<ul>
<li class="list list1">리스트1</li>
<li class="list list2">리스트2</li>
<li class="list list3">리스트3</li>
<li class="list list4">리스트4</li>
<li class="list list5">리스트5</li>
</ul>document.getElementsByTagName("li");
// 태그명이 li인 모든 요소들을 HTMLCollection으로 출력querySelector
- css에서 선택자를 작성할 때와 마찬가지로, class명, id명, 태그 속성명, 태그명 등을 활용하여 선택자를 찾을 수 있다.
- 노드의 하위 트리에서 첫 번째로 일치하는 엘리먼트 노드를 반환한다.
- 찾는 결과가 없을 경우 null을 반환한다.
<ul>
<li class="list list1">리스트1</li>
<li class="list list2">리스트2</li>
<li class="list list3">리스트3</li>
<li class="list list4">리스트4</li>
<li id="list" class="list list5">리스트5</li>
</ul>document.querySelector("li"); // 리스트1 출력
document.querySelector(".list2") // 리스트2 출력
document.querySelector("#list") // 리스트5 출력querySelectorAll
- 사용법은 querySelector과 동일하다.
- 찾은 결과 모두를 Nodelist로 반환한다.
<ul>
<li class="list list1">리스트1</li>
<li class="list list2">리스트2</li>
<li class="list list3">리스트3</li>
<li class="list list4">리스트4</li>
<li class="list list5">리스트5</li>
</ul>document.querySelectorAll("li");
// 태그가 li인 모든 요소를 Nodelist로 출력
document.querySelectorAll(".list");
// class명이 list인 모든 요소를 Nodelist로 출력DOM 탐색
parentNode: 직계 부모 노드
firstElementNode: 첫 번째 자식 노드
lastElementNode: 마지막 자식 노드
children: 자식 노드 중 element 노드만을 가리킨다.
nextElementSibling: 다음 형제 element node
previousElementSibling: 이전 형제 element node
