DOM이란 무엇일까?
문서 객체 모델(DOM, Document Object Model)은 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스.
이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공한다.
구글에 검색하면 위와 같은 설명을 볼 수 있다.
근데 잘 이해가 가지 않으니 하나하나 뜯어서 살펴보려고 한다.
1. 문서(Document)
말이 어렵게 느껴질 수 있지만 우리가 흔히 말하는 "문서"를 생각하면된다.
웹 페이지는 일종의 문서다. 세부적으로도 나눠지지만 쉽게 생각해서 웹 페이지 하나하나를 웹 문서라고 생각해보자.
이 문서는 웹 브라우저를 통해 해석되어 화면에 나타난다.
마치 프랑스어로 쓰여진 문서를 번역기를 통해 보여지는 거라고 생각하면 쉽다.
프랑스어로 적힌 문서를 표현하고, 수정하고, 적용하는 번역가 또는 편집자가 필요하다. 이 역할을 DOM이 하는것!
2. "문서 내의 모든 요소를 정의하고.." -> 객체(Object)
DOM은 요소(div, a, h1, event 등등) 하나하나를 객체로 생각하고 정의한다.
즉, 문서에 있는 모든 요소(element) - table, header, text 등 은 문서를 위한 document object model 의 한 부분이다.
HTML페이지 안의 한줄 한줄을 요소라고 이해하면된다. 그리고 그런 요소들이 전체 문서의 부분부분인 것!
3. "각각 요소에 접근하는 방법을 제공한다." - 접근을 위한 인터페이스
인터페이스란?
서로 다른 두 개의 시스템 사이의 접점이나 경계면.
사용자가 기기를 쉽게 동작시키는데 도움을 주는 시스템을 의미한다.
즉, 서로 다른 두 개의 연결길.
DOM은 object들로(2번의 요소) 문서를 표현하며, 이 문서들을 스트립트랑 프로그래밍 언어가 사용할 수 있게 연결하는 역할을 한다. 따라서 요소들에 접근하려면 DOM과 자바스크립트등 스크립트 언어를 통해 접근하여 조작할 수 있는 것이다.
웹 페이지들 <-- Dom --> 스트립트, 프로그래밍 언어
4. "각각 요소에 접근하는 방법을 제공" - DOM은 트리구조
html 문서를 보면, <html>부터 <head>, <title>등 점차 세부적으로 들어가는 형태로 되어있다.
<- 이 사진과 같이 HTML구조가 점자 하위로 들어가며 세부적으로
구체화되는 구조다.
이런 구조를 "트리구조"라고 하기에
즉, DOM은 "트리구조"!
head는 dom트리 중 head의 내용.
body는 dom트리 중 body의 내용.
전체 dom중에서 해당 태그부분이라고 생각하면된다.
하위로는 부모-자식 관계이고, 같은 라인 끼리는 형제관계.
해당 요소로 가기위해 경로가 다 있는 것이다.
5. DOM을 보는 방법
DOM을 보는 것은 HTML을 보는것이다.
네이버 웹 페이지에 들어가서 console창을 열어보자.
1) 전체 DOM에 접근
document 라고 쓰고 엔터!
#document가 나오고 하위로 html내용이 보인다. => 현재 DOM 전부.
2) 자식 요소에 접근
이 전체 DOM Tree중 자식요소인 body의 DOM Tree만 보고싶다면?
document.body 로 접근.
3) body에서 더 하위 요소에 접근
body에서 더 하위로 들어가기 위해서는 document.body.h1 방법으로는 안되고 다른 방법을 써야한다.
document.body.children
document.getElementsByName("div")
등등 다양한 방법이 있으니 따로 찾아보길 권장한다.
즉, 자바스크립트가 어떤 자식에 접근하려면? 점(.)과 하위요소를 적으면 접근할 수 있다.
이런식으로 "4번의 요소에 접근하는 방법을 제공"하는 것이다.
5. 정리
1~4번까지 읽고 다시 맨 위의 설명을 보면 처음 읽었을때 보다는 이해가 갈 것이다.
DOM이란 HTML, XML등의 요소하나하나를 모아서 웹 페이지(문서)를 이루는 역할을 한다고 생각하면 된다.
DOM을 말로 간단하게 정의하기에는 좀 한계가 있어보인다.
이해하기 쉽지 않기 때문에 DOM이라는 말이 어렵고 거부감이 느껴진다면, 그냥 웹 페이지를 표현하는데 도와주는 아이구나~ 라고 생각하면서 공부를 해나가면 점차 깊이 이해할 수 있는 날이 올 것이라고 생각한다.
*더 자세히 참고하고 싶다면
https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction
도움이 되었다면 공감! 눌러주시고, 잘못된 부분이 있다면 댓글로 알려주세요^^
'Front-end > React' 카테고리의 다른 글
| React) 라우터 (0) | 2022.01.22 |
|---|---|
| React) 이미지/파일 업로드 버튼 커스텀 (0) | 2021.11.27 |
| React) 이미지/파일 업로드 버튼 (0) | 2021.11.27 |
| 리액트 설치 방법 - 리눅스 (0) | 2021.11.15 |