4. `DOM, Document Object Model`

DOM은 Web API에서 학습한 것처럼 JavaScript를 통해 HTML Element를 조작하기 위해 브라우저에서 제공하는 API라고 볼 수 있음

dom

브라우저가 렌더링을 위해 HTML 코드를 한줄씩 읽으면서 HTML Element들을 마주치면,

각 Element들을 Node라고 불리는 타입의 Javascript 객체(object)로 만들게 되며, 최종적으로 모든 HTML Element는 Javascript object로 변환됨

모든 HTML element가 각자 만의 다른 attribute를 가지고 있기 때문에 Node object들도 서로 다른 타입으로 만들어짐


const headingEl = document.querySelector('h1');
const paraEl = document.querySelector('p');
const divEl = document.querySelector('div');
 
headingEl instanceof HTMLDivElement; // false, HTMLHeadingElement
paraEl instanceof HTMLDivElement; // false, HTMLParagraphElement
divEl instanceof HTMLDivElement; // true
 
headingEl instanceof Node; // true
paraEl instanceof Node; // true
divEl instanceof Node; // true

HTMLDivElement 타입

모든 DOM Node가 HTML Element인 것은 아님
공백, “The DOM” 과 같은 컨텐츠들은 엘리먼트 노드가 아닌 텍스트 노드(Text node)라고 표현

2. `DOM` Summary

DOM은 웹 페이지의 렌더링을 더 효율적으로 진행하고, 개발자들이 직접 동적으로 조작할 수 있도록 브라우저에 의해 제공되는 높은 수준(High-Level)의 Wep API

이러한 DOM API를 통해 실제 렌더링된 DOM tree에 영향을 끼치지 않는 선에서 HTML element들을 추가하거나 제거, 변경할 수 있음

HTML code를 보면 각 element들이 중첩(nesting)되어있기 때문에 브라우저 역시 이를 토대로 모방하여 트리 형태의 구조(Tree)를 만드는데, 차이점은 미리 생성된 Node object를 활용하여 만든다는 것

이러한 Node object는 추후에 브라우저가 효율적으로 렌더링하고 그 객체들의 라이프사이클을 통해 웹페이지를 관리하는데 도움을 줌.(react와 연관)

4. DOM, Document Object Model

HTMLDivElement 타입

2. DOM Summary

4. `DOM, Document Object Model`

2. `DOM` Summary