1. DOM이란?
문서 객체 모델(The Document Object Model, 이하 DOM) 은
HTML, XML 문서의 프로그래밍 interface 이다.
자바스크립트 언어로 html요소를 제어할 수 있도록 웹문서를 객체화 한 것
문서(HTML-주문서) -> 브라우저(크롬-공장) 이라고 할 때,
렌더링 과정중 렌더트리(웹 페이지에 표시될 요소들로 구성)가 생성된다.
브라우저가 렌더트리를 생성하기 위해 두 모델이 필요하다.
- DOM : html요소들의 구조화된 표현
- CSSOM : 요소들과 연관된 스타일 정보의 구조화된 표현
1) 사용목적
: 다양한 환경(크롬, 엣지 등)과 어플리케이션에서 사용할 수 있는 표준적인 프로그래밍 인터페이스 제공을 위해
body부분에 들어가는 객체요소들은 매 페이지들마다 다르다. 이 객체들을 제어하기 위해 DOM을 사용한다.
2) 구조 - 노드(node) 트리구조
- 노드 : 어떤 연결망에서 특정 지점과 지점을 연결하는데 표시하는 것
3) 기능
- 뷰 포트에 무엇을 렌더링 할지 결정
- 페이지의 콘텐츠 및 구조, 그리고 스타일이 자바스크립트 프로그램에 의해 수정
- node는 클릭등의 이벤트가 가해지는 eventTarget이기 때문에 이요소들은 모두 addEventListener등의 기능 또한 갖고있다. 이 기능들은 모든 DOM요소에 버튼들로 달려가지고 우리가 쓰는 자바스크립트로든 다른언어로든 각 요소들을 조작할 수 있다. - API로 구성되어있음
4) DOM과 HTML 차이
- DOM은 유효한 HTML문서의 인터페이스이므로, DOM을 생성하는 동안 브라우저는 유효하지않은 HTML코드를 올바르게 교정한다.
- DOM은 자바스크립트에 수정될 수 있는 동적 모델이어야 한다.
- 가상요소를 포함하지 않는다.(ex- css의 가상요소 after)
- 보이지않는 요소를 포함한다.(ex- display:none)
5) 가상 DOM이란?
(정리 필요)
참고사이트]
https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction
https://www.youtube.com/watch?v=1ojA5mLWts8
https://blog.naver.com/bonobonoks/221506668984
https://wit.nts-corp.com/2019/02/14/5522
hello