오늘 블로그에서 다뤄볼 내용은 바로 문서 객체 모델의 개념인 DOM입니다.
제가 지금까지 여러 블로그를 작성을 하면서 리액트 라이프 사이클, 브라우저 렌더링 .. 등등 여러 블로그에서
DOM을 많이 언급을 했었는데 사실 이 DOM이라는 것이 무엇인지에 대해서 하나도 모르고 있어서 이번 블로그를
통해서 조금 알아보는 시간을 가져볼까 합니다.
지금까지 알고 있는 DOM이라고는 물고기 돔 ..
DOM 그게 뭔데?
DOM이란 그럼 무엇일까?
문서 객체 모델 HTML, XML과 같은 문서의 프로그래밍 interface라고 할 수 있다. 이게 무슨 말이냐?
문서 객체는 <html>, <body>와 같은 html문서의 tag를 JavaScript가 사용할 수 있는 객체로 만드는 것이다.
그럼 모델(Model)은 뭘까?
위와 같은 문서 객체를 받아드리고 인식하는 방식이라고 생각하시면 쉽습니다.
이러한 DOM의 개념을 알기 위해서는 브라우저의 렌더링 방식을 알면 좋습니다!!
아직 안 본 사람들은 제 블로그 브라우저 렌더링 이해하러 가기 ⬇️
브라우저 렌더링 과정
혹시 여러분들은 브라우저 렌더링 과정에 대해서 아시나요?? 저는 벌써 프론트엔드라는 분야를 공부한 지 이제 1년이 거의 다 됐는데 아직 브라우저가 어떻게 렌더링이 되고 .. 방식은 무엇이 있
ltr2006.tistory.com
자 이제 그럼 브라우저 렌더링 과정에 대해서도 알아봤으니까 본격적인 DOM에 이야기를 해보겠습니다.
사실 DOM이라는 개념 자체가 뭐 엄청 복잡하거나 그런 것은 없습니다.
HTML문서를 브라우저에서 인식하고 이해할 수 있도록 하는 Tree 자료 구조입니다.
본 트리의 구조는 문서 노드, 요소 노드, 텍스트 노드 이렇게 3개로 구성이 되어있습니다.
먼저 문서 노드는 트리의 최상위 계층을 나타내며 전체 문서를 가리키는 Document입니다.
DOM 트리로 웹 페이지를 접근하게 도와주는 시작점입니다.
두 번째로 요소 노드인데, 요소 노드는 파란색으로 이루어진 HTML의 tag입니다.
이 요소 노드는 속성 노드와 텍스트 노드로 나뉘어 자식으로 가질 수 있습니다.
마지막으로는 초록색을 가진 텍스트 노드입니다. 주로 HTML 태그 안에 있는 텍스트들이 텍스트 노드이며
요소 노드와 다르게 자식 요소를 가질 수 없는 것이 특징입니다.
그래도 모르겠다고?
여러 블로그와 자료를 보면서 진짜 처음 접한 저도 이해하기 쉽게 작성한 글이 하나 있었는데요 ..
JavaScript는 브라우저가 읽고 어떠한 작업을 할 수 있는 언어이고, DOM은 이 작업이 이뤄지는 장소이다.
와 바로 저는 이해가 돼버렸습니다.
DOM은 HTML이 아니다.
말 그대로 이해를 못 하신 분들은 DOM이 그럼 HTML이라는 건가?라고 생각을 하실 수도 있습니다.
하지만 DOM은 HTML이 아닌 HTML 파일을 파싱 해서 나온 트리라는 것이다. 화면에 그려지는 렌더 트리는 DOM + CSSOM 이기에 달리 말하자면 렌더링 되는 요소만이 관련 있기 때문에 시각적으로 보이지 않는 요소는 제외된다.
DOM을 정리 하자면 ..
1. HTML 문서에 대한 interface이다.
2. JavaScript에 수정 가능한 동적 모델이다.
3. 가상 요소를 포함하지 않으며 보이지 않는 요소는 포함한다.
역시 마무리는 뭐다?? 바로 공식 문서 보기 ⬇️ (DOM -Wev APL | WDN)
DOM 소개 - Web API | MDN
이 문서는 DOM에 대한 개념을 간략하게 소개하는 문서이다: DOM 이 무엇이며, 그것이 어떻게 HTML, XML 문서들을 위한 구조를 제공하는지, 어떻게 DOM 에 접근하는지, API 가 어떻게 사용되는지에 대한
developer.mozilla.org
느낀 점
DOM이라고 하면 HTMl 태그를 파싱 해서 나온 트리의 이름이라고만 알고 있었지만, 실제로 많은 트리랑도
연관이 있고 문서 객체에 대해서 알아봐서 좋은 것 같다. 공식 문서 보면서 다시 공부해 봐야지 ~
오늘도 즐거운 개발하세요 ~ 🔥
'SW' 카테고리의 다른 글
| 그냥 함수? 화살표 함수? 뭐가 다를까 (0) | 2024.04.23 |
|---|---|
| I'm 동시성과 병렬성 그리고 비동기와 동기 master 🔨 (0) | 2024.03.31 |
| 좋은 코드란 무엇일까? (0) | 2024.03.19 |
| 브라우저 렌더링 과정 (0) | 2024.01.21 |
| TDD에 대해서 알고 있어? (0) | 2024.01.16 |
