DOM

1. DOM의 뜻

문서 객체 모델 (Document Object Model), HTML의 문서에 접근하기 위한 모델. 트리의 구조를 하고있다.

2. DOM의 구성

• 문서 노드 (document)
  DOM 트리의 최상위 노드. DOM에 접근하기 위해서는 반드시 거쳐야한다.

• 요소 노드 (Element)
  HTML의 tag에 대응하는 노드. (h1, div, img 등)

• 속성 노드 (Attribute)
  요소 노드의 속성을 나타내는 노드. 요소 노드의 자식 노드가 아니다.

• 텍스트 노드
  요소 노드 안의 문자들을 저장하는 노드. 자식 노드를 가질 수 없어 단말 노드가 된다.

3. DOM관련 JS 명령어

3-1. DOM 선택

• getElementById
DOM Tree에서 입력과 동일한 id를 가진 요소 노드를 탐색한다. 가장 먼저 찾은 요소 하나를 반환한다.


• getElementByClassName
DOM Tree에서 입력과 동일한 class name을 가진 요소 노드를 탐색한다. 일치하는 모든 요소를 List로 반환한다.


• getElementByTagName
DOM Tree에서 입력과 동일한 tag name을 가진 요소 노드를 탐색한다. 일치하는 모든 요소를 List로 반환한다.


• querySelector
DOM Tree에서 CSS Selector 문법을 이용해 요소 노드를 탐색한다. 가장 먼저 찾은 요소 하나를 반환한다.


• querySelectorAll
querySelector와 동일한 방식으로 탐색한다. 찾은 모든 요소를 List로 반환한다.


• window 객체 이용
window.id 또는 window[id]와 같은 방법으로 window 객체에 id로 접근이 가능하다. 해당 id를 가진 노드가 여러개라면 List로 반환된다.

3-2. DOM 탐색

위의 방법을 이용해 얻은 DOM 노드를 탐색에 이용이 가능하다.

• parentNode
선택한 요소의 부모 노드를 불러온다.


• firstElementNode
선택한 요소의 자식 노드 중 가장 첫 번째 노드를 불러온다. 자식 노드가 없을 경우 null을 반환한다.


• lastElementNode
선택한 요소의 자식 노드 중 가장 마지막 노드를 불러온다. 자식 노드가 없을 경우 null을 반환한다.


• children
선택한 요소의 모든 자식 노드를 배열로 반환한다. 자식 노드가 없을 경우 빈 배열을 반환한다.


• nextElementSibling
선택한 요소의 다음 형제 노드 (Sibling Node)를 가져온다. 없을 경우 null을 반환한다.


• previousElementSibling
선택한 요소의 이전 형제 노드를 가져온다. 없을 경우 null을 반환한다.

3-3. DOM 조작

• className, classList
선택한 요소 노드의 class 속성을 불러오고, 이를 이용해 class 속성의 변경 또한 가능하다.


• hasAttribute
선택한 요소 노드의 속성이 존재하는지 확인한다. boolean 값을 반환한다.


• getAttribute
선택한 요소 노드의 속성의 값을 반환한다. 해당 속성이 없다면 null을 반환한다.


• setAttribute
선택한 요소 노드의 속성의 값을 정의한다.


• removeAttribute
선택한 요소 노드의 속성을 제거한다.


• textContent
선택한 요소 노드에서 텍스트 노드에 접근하고 변경할 수 있다.


• innerHTML
선택한 요소 노드의 내부 HTML을 직접 수정한다. XSS(Cross Site Scripting)의 위험이 있다.


• creatElement
입력받은 태그에 해당하는 새로운 요소 노드를 생성한다.


• appendChild
입력받은 요소 노드를 선택한 요소 노드의 마지막 child node로 추가한다.


• removeChild
입력받은 요소 노드를 선택한 요소 노드의 child node에서 제거한다.

4. Redering

브라우저는 우리에게 화면을 보여주기까지 다음과 같은 과정을 거친다.

1. HTML 문서를 HTML Parser가 파싱해서 DOM Tree를 생성한다.
2. CSS 문서를 CSS Parser가 파싱해서 Style Rules을 생성한다.
3. Style Rules의 정보를 DOM Tree에 추가하여 Render Tree를 생성한다. 이 과정을 Attachment라고 한다.
4. Layout 또는 Reflow를 거쳐 현제 표시하려는 화면의 크기에 맞게 노드들의 정확한 위치와 크기를 계산한다.
5. 계산 결과를 이용해서 최종적으로 화면이 표시된다.

5. Virtual DOM

위에서 설명한 렌더링 과정을 javascript 등에 의해서 DOM이 변경될 때마다 반복한다. 하나의 노드의 변경에도 DOM tree 전체를 파싱하고 새로운 Render Tree를 생성하는 것이다. 이 과정은 경우에 따라서 큰 부하로 작용하며, 이에 대응하는 방식이 Virtual DOM이다. Virtual DOM은 DOM의 노드 정보 중 일부를 복사해 만든, 이름 그대로 가상의 DOM이다. 만일 하나의 기능 동작에 DOM의 변경이 여러 번 발생한다면, 기능이 끝나기 전의 변경을 Virtual DOM에만 적용하고 끝난 이후 최종 결과만을 실제 DOM에 적용해서 Render Tree의 재생성 횟수를 줄인다.

Reference

1. 프로그래머스 프론트엔드 데브코스
2. 위키백과, 문서 객체 모델
   https://ko.wikipedia.org/wiki/%EB%AC%B8%EC%84%9C_%EA%B0%9D%EC%B2%B4_%EB%AA%A8%EB%8D%B8
3. hashnode, Why Virtual DOM
   https://hashnode.com/post/the-one-thing-that-no-one-properly-explains-about-react-why-virtual-dom-cisczhfj41bmssp53mvfwmgrq