안녕하세요 미어캣입니다.
제가 공부한 내용들을 보면 DOM을 간략하게나마 정의한 부분들이 있긴하지만
앞으로 있어 기본이지만 알아야는 할 것 같아서 기록에 남겨두려고 합니다.
브라우저에 띄울 웹 페이지가 단순히 정보 전달만을 목적으로 하는 정적인 웹이라면 HTML, CSS로도 충분하지만,
인터랙티브한 기능(동적인 구현)을 하고자 한다면 자바스크립트와 DOM을 반드시 써야합니다.
DOM은 웹 페이지(HTML이나 XML 문서)의 콘텐츠 및 구조, 그리고 스타일 요소를 구조화 시켜 표현하여
프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 일종의 인터페이스입니다.
➡️ 즉 자바스크립트 같은 스크립팅 언어가 쉽게 웹 페이지에 접근하여 조작할 수 있게끔 연결시켜주는 역할을 담당
DOM은 어떻게 생성되는가?
DOM은 웹 페이지, 즉 HTML 문서를 계층적 구조와 정보로 표현하며, 이를 제어할 수 있는 프로퍼티와 메서드를 제공하는 트리 자료구조로 존재합니다. 그래서 HTML DOM, 혹은 HTML DOM Tree 로 부릅니다.
(HTML 문서는 최종적으로 하나의 최상위 노드(root 노드)에서 시작해 자식 노드들을 가지며, 아래로만 뻗어나가는 구조)
다음과 같은 HTML 이 존재할 때
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title
</head>
<body>
<h2 style="color:blue">DOM 문서 객체 모델</h2>
</body>
</html>
다음과 같은 Tree 구조로 브라우저 단에서 이를 파싱할 때 이런식으로 트리구조로 파악합니다.
- document node :
DOM Tree에서 최상위 루트 노드를 나타내며, document 객체를 가리킵니다. HTML 문서 전체를 나타내는 노드 - element node :
모든 HTML 요소 (body, h2, div 등)는 이 요소 노드입니다. 속성 노드를 가질 수 있는 유일한 노드 - text node :
모든 HTML 요소의 속성은 이 속성 노드입니다. 요소 노드에 대한 정보 - attribute node :
HTML 문서의 모든 텍스트
4가지 노드들이 존재함으로써 스크립팅 언어가 웹페이지에 접근하고 조작할 수 있게 됩니다.
특히 데이터 검색하기가 빠른 트리 구조로 이뤄져 있기 때문에 접근과 조작에 용이합니다.
자바스크립트와 DOM은 어떤 관계 ?
JS를 통해 대부분 DOM을 컨트롤하는건 웹 프론트엔드 개발의 역사에 따라
JS가 메인 스트림이 됐기 때문이지 JS가 아니더라도 파이썬, 자바 등의 언어로도
DOM 인터페이스를 활용하면 접근할 수 있습니다.
➡️따라서 자바스크립트와 DOM은 엄밀히 다른 개념이며, 꼭 자바스크립트로만 DOM을 다룰 수 있는 것도 아닙니다.
감사합니다.
참고자료 : https://www.codestates.com/blog/content/dom-javascript
'Web, View' 카테고리의 다른 글
| [React #1] What is React? (0) | 2024.03.14 |
|---|---|
| [Front CS] SSR과 CSR? (0) | 2024.03.13 |
| [Front CS] ES6문법에서 var, let, const 의 차이점은? (0) | 2024.03.11 |
| [Front CS] Ajax, Axios, Fetch에 대한 정리 (0) | 2024.03.08 |