프론트엔드 개발을 막 시작하고, 자바스크립트라는 언어를 만나게 되면 DOM이라는 개념에 대해 듣게 된다.
감성돔, 참돔, 허구연 아저씨의 돔구장까지는 아는데 DOM이라고 하는 생소한 개념을 마주하게 된다.
그냥 모른 채 넘어가도 자바스크립트로 DOM에 접근해 다양한 기능을 구현하는데 별 무리는 없지만
그래도 기왕 흘러 흘러 여기까지 온 거면, DOM이 정말 궁금하거나 혹은 면접을 준비하고 있을 테니
스리슬쩍 찍먹을 해보도록 하자.
DOM
우선 DOM의 의미부터 알아보자면 영어로 Document Object Model (문서 객체 모델)의 약자고,
조금 더 풀어서 설명하면 문서의 구조의 계층을 표현한 객체를 인지하는 방식을 DOM이라고 한다.
사실 이 말도 어렵다. 좀 더 쉽게 풀어보자.
const title = document.querySelector(".title")
HTML 문서 내에서 title이라는 class 선택자를 가지고 있는 요소를 특정할 때,
자바스크립트 내에서 위와 같은 코드를 사용해서 특정할 수 있다.
이렇게 요소를 특정하면, 자바스크립트를 이용해 스타일을 변경하거나 다양한 이벤트를 적용할 수 있다.
이러한 예시를 통해 DOM에 대해 조금 더 이해해 보자.
자바스크립트는 HTML 문서 그 자체를 이해하지 못한다.
그래서 자바스크립트가 이해할 수 있도록 HTML 문서를 파싱 하게 되는데,
여기서 파싱이라는 것은 문서의 구성 성분을 분해해 관계를 분석하고 구조를 설정하는 것을 의미한다.
즉, HTML 문서를 해석해 자바스크립트가 읽을 수 있는 구조로 만든 것이 DOM이다.
이때, 자바스크립트가 DOM에 접근할 수 있도록 DOM API를 제공해서
위와 같은 로직으로 DOM에 접근하고 조작, 탐색, 추가 등의 기능을 할 수 있게 되는 것이다.
DOM의 계층 구조
<html>
<head>
<meta>...</meta>
<title>...</title>
</head>
<body>
<div>...</div>
</body>
</html>DOM의 정의를 알아봤다면, 이번에는 DOM이 어떻게 생긴 친구인지 알아보자.
예를 들어, 위와 같은 HTML 문서가 있다고 가정해 보자.
현재 보이는 문서의 구조가 DOM에서는 트리 형식의 자료 구조로 구성이 되어있다.
위의 사진이 DOM이 지니고 있는 트리 형식의 자료 구조인데 모양을 보면
HTML의 각 요소들이 하나의 노드(node)가 되어서 마치 나무처럼 가지를 뻗듯 퍼져나가는 형태라
트리(tree) 형식의 자료 구조라고 말한다.
DOM에 대한 추가적인 내용
1. HTML !== DOM
DOM은 HTML 문서에서 만들어지는 것이긴 하지만, 완전히 동일하다고 볼 수 없다.
DOM은 HTML의 문서가 유효하지 않더라도 DOM이 생성되는 동안 올바르게 수정을 한다.
2. 화면에 보이는 것을 그대로 DOM으로 구성하지 않는다.
DOM은 HTML의 요소를 구조화하기 때문에 CSS에 영향을 받지 않는 경우가 있다.
예를 들어, display : none을 통해 실제 렌더 과정에서는 화면에 그려지지 않는다고 하더라도
DOM에서는 해당 요소의 구조를 포함한다.
또한 CSS에서 ::before 혹은 ::after를 이용해서 화면에 그려지는 가상 요소는
HTML에 포함이 되어 있는 부분이 아니기 때문에 DOM에서는 구성하지 않게 된다.
포스팅 작성에 참고한 감사한 글들
▶ WIT 블로그 : DOM은 정확히 무엇일까?(번역)
'Stack > HTML' 카테고리의 다른 글
| input 태그의 inputmode 속성 : 가상 키보드 타입 지정하기 (0) | 2024.12.02 |
|---|---|
| section과 article : 같은 듯, 다른 듯 애매한 둘 (1) | 2024.11.03 |
| attribute와 property의 차이 : 아니 왜 같은 속성인데 왜 달라요? (0) | 2024.10.17 |
| HTML에서 JS를 불러오는 최적의 위치와 설정은? (2) | 2024.10.11 |
| HTML은 프로그래밍 언어인가요? (0) | 2024.09.25 |