DOM

웹페이지는 6개의 과정을 거쳐 만들어 지는데 해당 과정을 CRP(Critical Rendering Path)라고 한다. CRP는 다음과 같은 과정을 가진다.

1. DOM트리 구축

2. CSSSOM 트리 구축

3. Javascript 실행

4. 렌더 트리 구축

5. 레이아웃 생성

6. 페인팅

이 과정은 4번재 렌더트리 구축을 기점으로 나눌수 있다. 렌더트리 구축 전에는 읽어들인 문서를 파싱하여 최종적으로 어떤 내용을 렌더링 할지 결정하며 이렇게 렌더트리가 구축된다. 후에는 브라우저는 해당 렌더링을 수행한다.

렌더트리란 웹 페이지에 표시될 HTML과 이와 관련된 스타일요소들로 구성된다. 브라우저는 렌더트리를 생성하기 위해 아래같은 두 모델이 필요하다.

• DOM(Document Object Model) : HTML들의 구조화된 표현
• CSSSOM(Cascading Style Sheets Object Model) : 요소들과 연관된 스타일 정보의 구조화된 표현

DOM

DOM은 웹 페이지에 대한 프로그래밍 인터페이스이다. 기본적으로 여러 프로그램들이 페이지의 콘텐츠 및 구조, 그리고 스타일을 읽고 조작할 수 있는 API를 제공한다.

DOM은 원본 HTML 문서의 객체 기반 표현 방식이며 DOM의 개체구조는 노드트리로 표현된다.

노드(Node)

노드는 트리를 구성하는 요소이며, 트리는 노드로 구성되어 있다. 각 노드는 서로 부모-자식 관계로 연결되어 있고, 트리 자료 구조에서 부모노드가 여러개의 자식 노드를 가질 수 있다.

• 노드,마디 : 트리를 이루는 구성요소
• 루트(Root) : 트리의 근간이 되는, 노드의 최상위 요소
• 리프(Leaf) : 트리의 가장 끝에 위치한 노드
• 가지(Branch) : 루트와 리프사이에 있는 노드

DOM과 HTML의 차이

• HTML : 화면에 보이고자 하는 모양과 구조를 문서로 만든것이며 단순 텍스트로 구성
• DOM : HTML문서의 내용과 구조가 객체모델로 변화되어 다양한 프로그램에서 사용할 수 있다.

내가 작성한 HTML코드는 DOM이 아니다. 하지만 내가 작성한 코드가 브라우저에 의해 파싱되면 DOM이 된다. 또한 페이지 view source가 DOM은 아니다.

그 페이지의 HTML을 보여줄 뿐이며 내가 작성한 HTML과 같다. 개발자도구에서 보이는 요소 검사기 또한 DOM과 가장 흡사하지만 DOM은 아니다. ::before, ::after 같은 선택자를 사용하여 생성된 가상요소는 CSSSOM과 렌더트리의 일부를 구성하지만 DOM은 오직 원본 HTML로부터만 빌드 되고, 요소에 적용되는 스타일을 포함하지 않기 때문이다.

DOM으로 제어하기

• document.querySelector : CSS선택자에 해당하는 가장 첫번째 DOM element를 선택
• document.querySelectorAll : CSS 선택자에 해당하는 모든 DOM element
• document.getElementById : 주어진 문자열과 일치하는 id를 가진 요소
• document.getElementsByClassName : 주어진 문자열과 일치하는 class를 가진 모든 요소
• document.getElementsByTagName : element의 HTMLCollection과 주어진 태그명을 반환, 루트를 포함해 전체 document를 대상으로함
• document.parentElement : 부모 요소 반환
• docuement.nextElementSibling : 바로 뒤에 있는 형제 요소 반환
• document.previousElementSibling : 바로 앞에 있는 형제 요소 반환
• document.children : 모든 자식 반환
• document.createElement : 지정한 태그네임의 HTML element생성
• element.classList.add : 지정한 클래스값 추가
• element.classList.remove : 지정한 클래스값 제거
• element.classList.toggle : 지정한 클래스가 존재한다면 제거, 없다면 추가
• element.setAttribute(‘attribute’,’value’) : ‘attribute’라는 속성을 추가하고 그 속성의 value를 ‘value’라고 한다.
• element.appendChild : 지정된 부모 의 node자식중 가장 막내로 붙인다.