DOM (Document Object Model)
말 그대로 문서 객체 모델인 DOM은 문서를 나타내기 위해 객체로 모델링한 것이다.
html문서를 작성하다보면 <head>, <body>등등의 태그를 볼 수 있는데, 이러한 태그들을 노드라 하고
해당 노드들을 트리구조로 조합해서 Document문서를 이루는 방식으로 문서를 나타내는 것이다.
표준화된 틀로 문서를 만들도록 하고 그 내용을 체워나가는 방식으로 이해한다.
DOM 트리구조
위와 같이 html문서가 있을 때, 웹페이지에 보여지는 것은 태그의 구조에 의해 조립되어 만들어진 문서다.
만들어진 웹문서는 보이기엔 일반 글이지만 각자 속하는 노드가 있고 트리구조로 이뤄져 있다.
DOM 뷰어를 이용해 해당 코드를 넣어본다면 DOM의 트리구조를 확인할 수 있다.
상위엔 HTML태그 노드가 있고 그 아래로 여러 노드들이 트리구조로 뻗어나가는 것을 확인할 수 있다.
html문서 작성시 이러한 틀을 생각하며 각 요소에 접근하는 것을 이해하며 작업을 할 수 있다.
'Front-end' 카테고리의 다른 글
| [React] 리액트에서 html태그에 스타일 입히고 중첩 태그 만들기 (0) | 2022.06.04 |
|---|---|
| [React] 순수 html파일에서 react 사용하기 (0) | 2022.06.03 |
| [React] 리액트 닷넷으로 시작하기 (0) | 2022.05.22 |
| [React] 리액트 시작하기 (0) | 2022.05.13 |
| [VSC] VScode 한국어, 자동완성, 확장프로그램, 파이썬 사용 (0) | 2022.04.19 |