728x90
(1) DOM이란?
Document Object Model(문서 객체 모델)의 약자로,
HTML 문서를 브라우저가 이해할 수 있도록 Tree 구조로 표현하여,
이를 조작할 수 있게 해주는 인터페이스이다.
위 문장을 하나 하나 뜯어서 해석해보자면
- HTML 문서를 브라우저가 이해할 수 있도록
- 브라우저는 HTML 코드 자체를 직접 분석할 수 있지만,
- HTML 문서를 더 명확하게 이해시키기 위해
- Tree 구조로 표현하여
- UI를 효율적으로 렌더링하기 위해 Tree 구조로 표현
- 이를 조작할 수 있게 해주는 인터페이스이다.
- HTML 구조에 대해 동적으로 검색, 수정, 추가, 삭제할 수 있게 해준다.
즉, DOM을 Tree 구조로 표현하는 이유는
>HTML 문서를 효율적으로 분석하고 렌더링하기 위함이다.
예를 들어 아래와 같은 HTML 문서가 있다면,
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>Hello World</h1>
<p>This is a paragraph.</p>
</body>
</html>
DOM에 의해 아래와 같은 트리 구조로 표현된다.
html
├── head
│ └── title
│ └── "My Page"
└── body
├── h1
│ └── "Hello World"
└── p
└── "This is a paragraph."
즉, DOM은 HTML 문서를 브라우저가 이해할 수 있는 Tree 구조로 표현되며,
이러한 DOM으로 JavaScript로 HTML의 요소를
검색, 수정, 삭제, 추가할 수 있다.
🍉 참고
반응형
'Web > Front' 카테고리의 다른 글
| [Front] Monaco Editor란? (2) | 2024.11.18 |
|---|---|
| [React] React란? (1) | 2024.11.12 |
