DOM(Document Object Model)은
HTML, XML문서를 나타내는 실체로 나타내는 API
Document = 문서를 뜻함(HTML, XML)
Object = 객체
Model = 모델
돔 구조
- DOM은 부모 자식 관계 처럼 Tree 구조로 되어있다.
- 각각의 요소(Element)들을 node라고 표현 한다.
- 추상 클래스처럼 부모 트리 node로 부터 기능과 속성을 상속 받는다
DOM과 문서객체
- DOM은 HTML 요소(Element)들이 모여서 설계된 웹페이지가 브라우저에 의해 해석되고 이벤트에 반응하고 값을 입력받는 등 기능들을 수행할 객체들로 실체화 된 웹페이지가 DOM이라 부른다
- 문서객체는 브라우저에 의해 해석된 요소(Element)들을 문서객체라 칭한다.
ex) <html>, <body>, <div> 등 HTML 태그 요소(Element)들 - DOM이 완성 되고 나면 자바스크립트 등의 언어가 DOM을 제어할 수 있다.
** (타 언어도 가능함, ex)Python의 BeautifulSoup도 DOM을 조작함) ** - 직접 DOM에 접근하는 것은 지양해야 한다.
DOM API
- DOM의 각 node와 상호작용을 위한 인터페이스로 웹페이지(HTML)을 수정하기 위해 사용하는 것이 DOM API이다
- 모든 요소(Element)들은 기능이 있다
-> ex) <a 태그 요소(Element)들에 href 라는 기능을 가진 API
-> ex) <img 태그 요소(Element)들에 src라는 속성을 가진 API - 기능, 속성이 달린 모든 DOM 요소(Element)들들을 자바스크립트로 조작할 수 있음.
- DOM은 API로 인해 그래서 여러 다른 브라우저에서 만들어도 같은 형태의 DOM 만들어짐
CSSOM
- CSS에서 DOM은 CSSOM이라는 것으로 따로 만들어짐
- 자바스크립트의 DOM의 제어가 끝나면 DOM 구조를 기반으로 CSS를 읽어 화면 배치와 속성에 대한 정보를 사용
해당 과정 (CSS 를 읽는 과정)에서 브라우저는 CSSOM를 생성 - 브라우저는 DOM 트리와, CSSOM 트리를 융합하여 화면에 출력
Virtual DOM
- 브라우저에 변화가 일어나면 바로 DOM에 새로운 것을 넣는 것이 아니라,
JavaScript로 이루어진 Virtual DOM에 렌더링을 하고 기존의 DOM 과 비교하여
정말 변화가 필요한 곳에만 업데이트를 해주는 개념 - 브라우저 단에서 이루어짐(메모리에서 먼저 구현)
런타임 이라는 조건 하에 브라우저에 로드 되는 자바스크립트 Dom에 가해지는 변화들을 최소한으로 줄인 것 - 쉽게 말하면, 기존 DOM은 계속 돌고있고 만약 DOM의 변화를 감지하면 Virtual DOM이 기존 DOM과 비교하여 필요한 부분만 렌더링 (JavaScript로 객체이기 때문에 성능이 매우 빠름)
* 참고자료
https://react.vlpt.us/basic/01-concept.html
https://nossodia.tistory.com/152
https://blogpack.tistory.com/668
https://www.youtube.com/watch?v=1ojA5mLWts8
https://www.youtube.com/watch?v=wKwMRH0PkMg
https://kingofbackend.tistory.com/25
https://www.howdy-mj.me/dom/what-is-dom/
반응형
'개발 > 자바스크립트 및 프론트' 카테고리의 다른 글
| 번들러 (bundler) (0) | 2022.01.20 |
|---|---|
| div, span 태그 (0) | 2022.01.19 |
| CSS 선택자 (0) | 2022.01.19 |
| HTML 에서 빈도수가 가장 높은 태그 (0) | 2022.01.16 |
| React, Vue.js, Angular, JQuery, Svelte (0) | 2021.12.29 |
댓글