1. 'DOM' 이란?
DOM은 Document Object Model의 약자로, 문서 객체 모델이라는 뜻이다.
DOM에 대한 좋아하는 설명이 세 가지가 있다.
- 웹 브라우저가 HTML 페이지를 인식하는 방법
- 페이지를 정의하는 객체로, 웹 사이트에 대한 모든 정보를 담고 있는 객체
- document 객체와 관련된 객체들의 집합
웹 페이지는 사실 문서(document)이다. 이 문서는 웹 브라우저를 통해 해석이 되어 화면에 나타난다.
이 모든 과정과 뜻을 망라하는 것이 DOM이라고 생각하면 편하다.
2. 'DOM'의 특징
문서 객체 모델(DOM)을 이해하기 위해, 먼저 문서 객체에 대해 알아보자.
문서 객체(document object)란,
<html>이나 <body> 같은 html 태그 요소(element)들을 'JavaScript가 이용할 수 있는 객체(object)'로 만든 것이다. 이 문서 객체는 페이지라는 문서의 객체가 된다.
따라서, '문서 객체를 조작한다는' 말은 'HTML 요소를 조작한다'라는 뜻이 된다. 문서 객체를 조작함으로, HTML 요소들을 런타임으로 변화시켜 다이나믹한 UI를 구현할 수 있다.
이때 Document Object Model(DOM)은 이 문서 객체를 조작하는 방법을 제공하는데, DOM을 사용하면 HTML 페이지 요소들의 조작이 가능한 것이다.
JavsScript와 같은 스크립트 언어들은 런타임으로 DOM을 수정할 수 있게 해준다.
3. 기타 특징
- 'DOMContentLoaded'라는 이벤트가 있다. 브라우저가 HTML을 읽고, DOM을 완성하면 발생하는 이벤트이다.
- 'querySelector나 getElementById로 DOM 요소를 선택할 수 있다.
'JavaScript' 카테고리의 다른 글
| Hoisting - JS 엔진이 하는 일 (0) | 2023.05.15 |
|---|