[JS] DOM(문서 객체 모델)이란?

💡 DOM(문서 객체 모델)이란?

DOM이란 HTML, XML 문서의 프로그래밍인터페이스다. DOM은 문서의 구조화된 표현을 제공하며 자바스크립트 같은 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM 은 노드와 객체로 이루어진 문서를 트리구조로 표현한다. (DOM tree)

DOM은 W3C의 공식 표준이며 플랫폼/프로그래밍 언어에 중립적이다.

DOM Tree

출처 코드캠프

document node (문서 노드)

트리의 최상위 루트 노드. document 객체를 가르킨다. DOM에 진입할 수 있는 진입점 역할을 해줌. HTML 문서에 document node는 1개만 존재한다. window.document, document로 사용할 수 있음

element node (요소 노드)

모든 HTML 요소 (head, body, h1, div 등). 속성 노드를 가질 수 있다. 어트리뷰트, 텍스트 노드에 접근시에는 먼저 요소 노드를 찾아 접근해야 함. 부모,자식 관계를 가지게 되어 계층적 구조를 이룰 수 있음

attribute node (속성 노드)

모든 HTML 요소의 속성. 속성 노드는 해당 속성이 지정된 요소의 자식이 아닌 '일부'로 표현됨

text node (텍스트 노드)

HTML 요소의 모든 텍스트. 요소 노드의 자식으로 자식 노드를 가질 수 없음. (DOM tree의 최종단, 리프노드)

DOM API

DOM은 DOM API을 통해 접근할 수 있다

자주사용하는 메서드는 아래와 같다

document.getElementById()
// Element Node의 id 속성을 체크해 해당하는 Element를 참조해온다.

document.getElementByClass()
// Element Node의 class 속성을 체크해 해당하는 Element를 참조해온다.

document.querySelector()
// 소괄호 안에 입력한 값에 해당하는 Element를 참조해온다.
// id(”#”)를 입력하는 경우 id 기반, class(”.”)를 입력하는 경우 class 기반 참조

document.querySelectorAll()
// 소괄호 안에 입력한 값에 해당하는 Element를 참조
// querySelector와 다르게 배열 형태로 모든 요소를 참조

document.createElement()
// 새로운 Node를 생성.
// 그러나 DOM에 직접 추가해주는 과정을 거치치 않으면 DOM에 속하지 않음

document.appendChild()
// Element Node를 현재 DOM에 추가. 이때의 document는 다른 Element가 될 수도 있음.

 

참고

본 글은 훈훈한 자바스크립트 강의의 내용과 참고글을 참고해 정리한 글입니다

https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model

https://poiemaweb.com/js-dom

https://www.codestates.com/blog/content/dom-javascript