HTML의 문서 처리 순서
1. 문서 읽기
2. 토큰 생성(태그를 토큰으로 나눈다)
3, 노드 생성(부모-자식)
4. 문서 렌더링
💡DOM이란?
브라우저가 HTML을 해석해 만든 문서 트리
구조이면서 객체들의 집합
웹 환경에서 제공되는 객체 구조를 의미
JavaScript가 아니다
각각의 요소가 부모, 형제, 자식을 가지고 그 관계를 유지하며 문서를 표현
구성요소
1. 구조 (건물) : 조작 전 자동으로 생긴 초기 구조
2. DOM API (조작) : 공구
= 분리하지 않으면 조작이 어렵고 에러 발생 시 해결이 어렵다
DOM
자바스크립트 언어의 일부가 아니라 웹브라우저라는 환경에서만 제공되는 전용 객체 모델임
++ Node.js는 브러우저가 아닌 서버 환경에서 자바스크립트를 실행할 수 있도록 만든 런타임 환경을 말한다.
그래서 DOM이 존재하지 않아 document, window같은 전역 객체가 없으며, DOM API도 제공되지 않는다.
DOM API
브라우저가 제공해주는 도구 모음
브라우저가 미리 정해놓은 공식적인 함수
web API / Host Object
document, window같은 특수 객체를 만들어 자바스크립트에 제공
JS vs DOM
Dom : 브라우저가 html을 해석해서 만든 문서 객체 트리
- Dom은 구조이면서 객체들의 집합이다
- 구조적인 이유 : 각각의 요소가 부모, 자식, 형제를 가지고 있고 그 관계를 유지하며 문서를 표현하기 때문
- DOM 문서(html)를 객체(자바스크립트)처럼 다루기 위해 트리구조로 만들었다.
- HTML 요소를 하나의 노드로 다룸
console.dir : 객체의 모든 속성을 트리처럼 펼쳐서 볼 수 있도록 함
줄바꿈(공백)도 하나의 텍스트로 인지
next: 모든 노드(text, 주석, 태그, 줄바꿈, 공백 등)
nextElement: html 요소만 출력
JS: 그 구조를 조작할 수 있도록 브라우저가 연결해준 api를 활용하는 도구이자 언어
document
document란? 메모리에 만들어진 트리 전체를 가리키는 것
➡️이 관리자 시스템이 있어야 태그, 그 안에 존재하는 것들을 관리할 수 있다
document는 우리가 보이는 html을 다룰 수 있도록 만들어주는 특별한 객체
각각의 노드의 역할
노드에는 태그, 텍스트, 주석, 속성 등이 존재
1. element 노드
- 노드 타입 값 : 1
- html의 태그 요소들을 의미
- 눈에 보이는 html 태그, 건물의 뼈대
- div, span, p 등 실제 화면에서 버튼, 상자, 제목처럼 시각적으로 보이는 부분 구성
2. text 노드
- 노드 타입 값 : 3
- 태그 내부의 일반 텍스트
- 태그 안의 글자, 건물 안의 내용물
- <span>World!</span>에서는 World!를 의미
3. Comment 노드
- 노드 타입 값 : 8
- html 안에 작성된 주석
- 보이지 않는 주석, 벽에 붙은 메모지
- 브라우저 화면에서는 보이지 않지만 dom 트리에는 실존하는 노드
4. Attribute 노드
- 노드 타입 값 : 2
- 태그에 붙는 속성 정보를 의미
- 태그 속성 정보. 건물 옆의 표지판
- id="box", class="red"와 같이 속성을 의미하지만 .childNodes에는 포함되지 않고 .getAttribute()와 같은 별도 메서드로 접근해야함
노드 타입 값은 .nodeType 속성을 통해 알아 낼 수 있다.
+ 간단하고 직관적이게 속성을 읽고 수정할 수 있는 .getAttribute(), .setAttribute()를 많이 사용한다.