문서 객체 모델(DOM)이란?
결론적으로 DOM(Document Object Model)은 XML이나 HTML 문서에 접근하기 위한 객체 지향 모델로써, 구조화된 문서를 표현하는 방식이다.
Window 객체가 창을 의미한다면 Document 객체는 윈도에 로드된 문서를 의미한다고 할 수 있다.
DOM은 Document Object Model의 약자로 Document는 문서이고 Object는 객체, Model은 그냥 모델이라는 한국어를 뜻한다.
이를 풀어서 해석하자면 문서 객체 모델로 번역 가능하다.
그렇다면 이 문서 객체란 무엇인가?
문서 객체란 <html>이나 <body> 같은 html문서의 태그들을 JavaScript가 이용할 수 있는 객체(object)로 만들면 그것을 문서 객체라고 표현한다.
여기에 Model을 붙였는데 Model이라는 영어 단어에는 모형, 주형이라는 의미도 있고 모듈이라는 의미도 있다.
비슷하게 여기서는 문서 객체를 '인식하는 방식'이라고 해석할 수 있습니다.
따라서 DOM은 넓은 의미로 웹 브라우저가 HTML 페이지를 인식하는 방식을 의미하며 조금 좁은 의미로 본다면 document 객체와 관련된 객체의 집합을 의미한다.
DOM의 형태
DOM은 tree 형식의 자료구조를 가지고 있으며 노드(node)라고 불리는 계층적 단위에 정보를 저장하고 있다.
DOM은 이러한 노드들을 정의하고, 그들 사이의 관계를 설명해 주는 역할을 한다.
tree의 자료구조를 간단히 설명하자면 root node에서 시작된다.
하지만 나무는 땅에서 솟아서 점점 위로 뻗어나가지만 tree형 자료구조는 흔히 위의 root node에서 아래로 퍼져나가는 형태로 그린다.
tree에서는 위쪽의 node를 부모(parent) 노드 아랫쪽 노드를 자식(child)라고 한다.
root node는 가장 위에서 시작되는 node이니까 parent가 없는 node가 된다.
그리고 children(자식)이 없는 node를 leaf node라고 하는데 뿌리(root)에서 시작해서 잎(leaf)에서 끝나기 때문이다.
node란 무엇인가?
tree 구조에서 root 노드를 포함한 모든 개개의 개체를 node라고 표현한다.
head, body, title, script, h1, HEADER-1 등의 태그뿐 아니라 태그 안의 텍스트나 속성 등도 모두 node에 속한다.
HTML 태그를 요소노드(Element Node)라고 부르고 요소 노드 안에 있는 글자를 Text 노드(Text Node)라고 부르기도 한다.
DOM은 어떻게 사용할까?
HTML, CSS가 사용자에게 직접적으로 보이는 것이라면 DOM은 기계나 소프트웨어가 웹 사이트의 구조를 어떻게 이해하는지에 대한 표준이라고 할 수 있다.
기계를 위한 표준을 여기서 이야기하는 이유는 자바스크립트 역시 DOM을 통하여 HTML과 CSS로 구성된 웹의 구조에 접근하고 컨트롤할 수 있기 때문이다.
자바스크립트 같은 프로그래밍 언어가 DOM구조에 접근할 수 있는 방법을 제공하여 문서 구조, 스타일, 내용 등을 변경할 수 있게 한다.
HTML 요소를 다루기 위해서는 우선 해당 요소를 선택해야만 하는데 특정 HTML 요소를 선택하는 방법은 아래와 같다.
- HTML 태그 이름(tag name)을 이용한 선택
- 아이디(id)를 이용한 선택
- 클래스(class)를 이용한 선택
- name 속성(attribute)을 이용한 선택
- CSS 선택자(selector)를 이용한 선택
- HTML 객체 집합(object collection)을 이용한 선택
www.tcpschool.com/javascript/js_dom_element
코딩교육 티씨피스쿨
4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등
tcpschool.com
DOM과 HTML이 같은가?
DOM은 HTML 문서로부터 생성되지만 항상 동일하지 않으며 DOM과 원본 HTML은 1대1 맵핑된 것처럼 보이지만 둘 사이에 몇 가지 차이점이 존재한다.
- 항상 유요한 HTML 형식
- DOM은 자바스크립트로 수정될 수 있는 동적 모델이다.
- DOM은 가상 요소는 포함하지 않는다. ( ::after )
- DOM은 보이지 않는 요소도 포함한다. ( display: none )
DOM 의 핵심 Interfaces
DOM에서 가장 많이 사용되는 interfaces를 정리해보았다.
Document와 window objects는 DOM 프로그래밍에서 가장 자주 사용하는 objects이다.
간단하게 설명하자면, window object 는 브라우저와 같다고 할 수 있으며, document object는 root document 자체라고 할 수 있다.
- document.getElementById(id)
- document.getElementsByTagName(name)
- document.createElement(name)
- parentNode.appendChild(node)
- element.innerHTML
- element.setAttribute
