DOM Node | Notion

DOM은 Document Object Model의 약자로, HTML과 CSS 등을 바탕으로 Node와 Node Tree를 생성하고 Event를 컨트롤하는 등의 작업을 JavaScript 등을 이용해 처리할 수 있게 해줍니다

[Node와 Node Tree]

브라우저가 html 문서를 파싱해서 DOM으로 변환 시킨다

변환후 렌더링 해서 화면에 노출시킨다

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title>웹 사이트 제목</title>
  </head>
  <body>
    웹 사이트 내용
  </body>
</html>

Window
|- Document
|--|- Doctype: html
|--|- HTML lang="ko"
|--|--|- HEAD
|--|--|--|- #text:
|--|--|--|- META charset="UTF-8"
|--|--|--|- #text:
|--|--|--|- TITLE
|--|--|--|--|- #text: 웹 사이트 제목
|--|--|--|- #text:
|--|--|- #text:
|--|--|- BODY
|--|--|--|- #text: 웹 사이트 내용

Window객체 아래 Document 가 가장 상위 Node

[Node의 구조]

자바스크립트의 객체와 마찬가지로 DOM Node도 Prototype 상속구조를 가진다

HTML: 
<div></div>

객체 상속 구조:
HTMLDivElement
|- HTMLElement
|--|- Element
|--|--|- Node
|--|--|--|- EventTarget
|--|--|--|--|- Object

Element의 스펙문서

Web IDL로 표기 되있다
inteface Element : Node
- Node를 상속했음을 알 수 있다
자주쓰는 메서드들도 많이 정의 되어있다

DOM 101 - Nodes&Events