[Javascript] DOM (The Document Object Model) 이란

DOM = The Document Object Model

 

MDN 웹 문서에는 DOM을 아래와 같이 설명한다.

DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다.

 

DOM 은 웹 페이지의 객체 지향 표현이며, 자바스크립트와 같은 스크립팅 언어를 이용해 DOM을 수정할 수 있다.

 

1분 코딩 강사님께서는 아래와 같이 DOM을 설명하셨다.

문서 안의 태그, 속성, 클래스, id, 텍스트 등을 객체로 바라보는 모델로
Html 요소를 Javascript로 조작하는 것이다.

 

마지막으로 참고한 J 기술 블로그에는 아래와 같은 설명이 있다.

DOM은 문서 내 모든 요소들과의 관계를 부자 관계로 표현할 수 있는 트리 구조로 구성한 것이다.

 

 

위 설명들에 따르면 DOM의 정의는 아래와 같이 정리할 수 있을 거 같습니다.

 

“DOM 은 웹 페이지의 요소 들의 관계를 트리 구조로 표현한 것이며, 자바스크립트와 같은 스크립팅 언어를 이용해 DOM을 수정할 수 있다.”

 

---

참고자료

- MDN 웹 문서

developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction

- 1분 코딩(자바스크립트 기초 Part 3: DOM 스크립트, 이벤트 | 자바스크립트 강좌)

www.youtube.com/watch?v=Y3_2BLb3hz8&list=PLe9WXHRkq9p0k7eF0TrIHgL5Cy9khHWnX&index=3

 

- J 기술 블로그([Javascript] Window, DOM, BOM 이란?)

cbw1030.tistory.com/46