안녕하세요. 박기린입니다.
HTML과 JS는 서로 밀접한 관계를 맺고 있습니다. 웹 프로그래밍 - 웹사이트를 제작함에 있어서 특히 그러한데요, 이때 중요하게 사용되는 개념 중 하나로 'DOM'이 있습니다. 지금부터 DOM에 대해 알아보겠습니다.
DOM
DOM은 Document Object Model (문서 객체 모델)의 줄임말입니다. DOM은 HTML, XML document의 구조화된 표현(structured representation)을 제공하며, 프로그래밍 언어(JS 등등)가 DOM 구조에 접근할 수 있게 해줍니다.
이때, document는 웹페이지라고 보셔도 됩니다. 웹페이지가 html로 작성된 문서의 일종입니다.
<div>태그 단위, <form>태그 단위 등등 <html element>의 태그들을 객체(object)로 묶은 후, 자바스크립트와 같은 프로그래밍 언어가 직접 스타일이나 내용 등을 변경할 수 있게 해줍니다. 좀 더 짧게 표현하자면, DOM은 HTML과 JS 파일의 connection point 입니다.
DOM Tree Structure
DOM은 HTML로 작성된 페이지가 브라우저에 load될 때, 자동으로 위의 HTML element 트리를 저장합니다. 이 트리를 DOM Tree라고 부릅니다. 그리고 Tree 안에 요소들을 node라고 부릅니다. 위의 사진의 우측 트리 도표에서, 사각형 요소들을 node라고 보시면 됩니다. 그리고 JS(또는 다른 프로그래밍 언어)를 통해서 각 노드와 상호작용할 수 있습니다.
node들은 계층 구조를 이루고 있습니다. 그중 최상위 노드인 document에서부터 시작합니다.
document는 JS에서 볼 수 있는 special object입니다. DOM의 entry point를 제공합니다. 그래서 JS에서 html 요소들을 선택할 때 (select) document object에서 selector를 불러옵니다.
DOM Tree는 element 노드 뿐만 아니라, 그 안에 담긴 Text, comments 등등 HTML document의 모든 요소를 node로 가집니다.
이처럼 DOM은 HTML document의 모든 것을 representation합니다.
DOM !== 자바스크립트
DOM은 JS로 웹 프로그래밍을 할 때 많이 보이다보니, JS 용어라고 착각할 수 있습니다. 하지만 DOM은 JS의 기능이 아닙니다.
DOM은 Web APIs를 따릅니다. Web APIs는 JS와 Interact 할 수 있는 라이브러리의 일종입니다.
각 인터넷 브라우저들은 WEB APIs를 내장하고 있고, 따라서 DOM API를 내장하고 있습니다. 그래서 JS에서 HTML의 DOM에 연결하고자 할 때 브라우저 내부에서 이를 인식하고 'DOM manipulation'을 가능하게 해줍니다.
DOM manipulation - 'DOM(HTML element)의 내용, 스타일 등등을 수정, 삭제하는 등 조작한다'라는 의미합니다.
'JS > JavaScript 강의' 카테고리의 다른 글
| 27. Handling Click Events - 이벤트 핸들러 (0) | 2022.10.25 |
|---|---|
| 26. DOM을 이용하여 HTML Elements를 조작해보기 (0) | 2022.10.23 |
| 24. 반복문 - for Loop (0) | 2022.10.20 |
| 23. Object 메소드 (0) | 2022.10.19 |
| 22. Object 소개 (0) | 2022.10.18 |
