DOM 이란?

👉DOM

---

DOM 소개 - Web API | MDN

[JavaScript] DOM이란 무엇인가?

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

DOM 은 동일한 문서를 표현하고, 저장하고, 조작하는 방법을 제공한다. DOM 은 웹 페이지의 객체 지향 표현이며, 자바스크립트와 같은 스크립팅 언어를 이용해 DOM 을 수정할 수 있다.

 

• W3C DOM, WHATWG DOM 표준
• ⇒ 많은 브라우저들이 표준 규약에서 제공하는 기능 외에도 추가적인 기능들을 제공하기 때문에 사용자가 작성한 문서들이 각기 다른 DOM 이 적용된 다양한 브라우저 환경에서 동작할 수 있다는 사실을 항상 인지하고 있어야 한다
• 브라우저 객체 모델(BOM)의 최상위 객체는 window라는 객체이다. DOM은 이 window 객체의 하위 객체이기도 하다.
• tree 형식의 자료구조로 만들어져있음

DOM 과 Javascript

초창기에는 자바스크립트와 DOM 가 밀접하게 연결되어 있었지만, 나중에는 각각 분리되어 발전해왔다.

페이지 콘텐츠(the page content)는 DOM 에 저장되고 자바스크립트를 통해 접근하거나 조작할 수 있다.

API (web or XML page) = DOM + JS (scripting language)

DOM 에서 자주 사용되는 것들

document.getElementById(id)
document.getElementsByTagName (en-US)(name)
document.createElement(name)
parentNode.appendChild (en-US)(node)
element.innerHTML (en-US)
element.style (en-US).left
element.setAttribute (en-US)
element.getAttribute
element.addEventListener (en-US)
window.content (en-US)
window.onload (en-US)
window.dump (en-US)
window.scrollTo (en-US)