DOM 기본

학습 목표

DOM: HTML 문서를 자바스크립트 객체처럼 다룰 수 있도록 만든 모델(프로그래밍 인터페이스)

DOM(Document Object Model, 문서 객체 모델)은 HTML 문서를 객체(Object) 형태로 표현한 프로그래밍 인터페이스로, 자바스크립트를 통해 HTML 문서에 접근하고 조작할 수 있도록 해준다.

웹 페이지는 하나의 문서(Document)로 간주되며, DOM은 이 문서의 모든 요소와 콘텐츠를 객체로 표현하여 구조/스타일/콘텐츠를 동적으로 변경할 수 있도록 지원한다.

DOM은 노드(Node)라는 계층적 단위로 정보를 관리한다. HTML 문서는 노드 트리(Node Tree)로 표현되고, DOM은 이 트리 구조에서 각 노드와 노드 간의 관계(부모/자식/형제 등)를 정의한다. 예를 들어 <body> 태그는 document.body 객체로 나타낼 수 있고, 자바스크립트를 통해 읽거나 수정할 수 있다.

한편, DOM 노드는 여러 유형으로 구성된다. 각 노드의 유형은 nodeType 읽기 전용 속성을 통해 확인할 수 있다. 예를들어 nodeType 값이 1이라면 Element Node, 2라면 Attribute Node를 나타낸다. HTML 문서의 모든 구성 요소(요소, 텍스트, 속성 등)는 노드로 표현된다. 주요 노드 유형은 아래와 같다.

Element Node: HTML 요소(<div>, <p> 등).
Attribute Node: 요소의 속성(예: id, class 등).
Text Node: 요소 안의 텍스트.
Document Node: DOM 트리의 최상위 루트(document 객체).
…

브라우저는 HTML 문서를 렌더링하는 과정에서 DOM을 생성한다. 자바스크립트는 이렇게 생성된 DOM을 통해 화면에 표시된 내용을 실시간으로 변경할 수 있다.

</aside>

자식, 부모 엘리먼트 찾기

DOM 트리 출력(DOM 구조 조회) : console.log(document.body)
요소를 DOM 객체로 취급하여 출력(객체 속성 확인시 편리함) : console.dir(document.body)