document가 브라우저에선 있지만, Node.js에선 없는 이유는?
document가 js요소가 아닌 브라우저 환경에서 제공되는 것이기 때문
웹 개발에서 사용되는 document 객체는 브라우저에서 제공하는 window 객체의 한 요소window.document 객체를 DOM이라 분류
Web API
Web API에는 DOM, BOM, ... 등이 있음
브라우저에서 제공하는 이 모든 것을 통틀어 Web API라고 함Web API는 JS 기능은 아니지만 JS 등을(JS로만 제어가 가능한 건 아님) 통해 제어 할 수 있도록 브라우저가 제공함
BOM (Browser Object Model)
ex) window.location, window.navigator, window.screen, window.history
브라우저 흐름
웹사이트 접속하면 브라우저가 HTML 문서 읽음
↓
그리고 해석 (Parsing)함
↓
그 결과 DOM이 만들어짐 (DOM은 트리 전체를 말함)
각각을 구성하는 요소는 Node라고 함
js로 웹페이지의 요소들을 제어할 수 있는 이유는 각각의 Node가 모두 API이기 때문
(API는 간단하게 말하면 원하는 걸 주문하면 원하는 게 나오는 것)
DOM 기능
-
HTML 문서에 대한 모델 구성
: 브라우저는 HTML 문서 로드 후 해당 문서에 대한 모델을 메모리에 생성 (DOM tree) -
HTML 문서 내의 각 요소에 접근/수정
: DOM은 모델 내의 각 객체에 접근하고 수정할 수 있는 프로퍼티와 메소드 제공 (DOM이 수정되면 브라우저가 변경해줌)
DOM Tree 구조
-
DOM tree
- 브라우저가 HTML 문서를 로드 후 생성하는 모델
- 객체를 트리로 구조화하여 관계를 표현
-
Document Node (문서 노드)
: 트리의 최상위
ex)<!DOCTYPE html> -
Element Node (요소 노드)
: html 요소
ex)<html>,<head>,<body>,<div> -
Attribute Node
: html 요소의 attribute
ex)class=" ",id=" " -
Text Node
: html 요소의 텍스트, 트리 최하단
