Document Object Model APIs

Document Object Model APIs

Document Object Model APIsDOM Standard, HTML Standard, UI Events, Web IDL Standard, CSS Object Model, CSS Font Loading Module Level 3, CSSOM View Module, Fullscreen API Standard, Picture-in-Picture, Pointer Lock 2.0, Web Animations, Selection, DOM Level 1, DOM Level 2, DOM Level 3, DOM Level 4

웹브라우저는 웹 문서 구조를 동적으로 다루기 위한 문서 객체 모델인 DOM을 제공한다. DOM에는 사용 빈도를 떠나 매우 많은 API가 존재한다. 우리는 어떤 API가 있고 어떻게 사용하는지를 잘 알고 있어야 할 것이다.

설명

문서 객체 모델(Document Object Model)은 HTML, XML 문서의 프로그래밍 인터페이스(Application Programing Interface:API)라고 할 수 있다. 웹 문서는 다양한 태그들이 명시적 또는 암시적 규칙에 따라 중첩되어 작성된다. 이것을 웹브라우저가 해석해 화면에 렌더링한다. 이때 웹브라우저는 해석만 하는게 아니라 작성된 태그들을 프로그래밍적으로 접근하여 제어가 가능한 상태로 만들어 준다. 중첩하여 작성된 태그와 똑같은 구조로 각 태그에 맞는 객체로 구조화해 둔다. 이것이 DOM이다. 구조화 작업이 끝나면 프로그래밍적으로 접근하여 제어가 가능하다. 조건에 따라서 DOM 구조를 변경할 수도 있고 스타일 등을 변경할 수도 있다. 이러한 작업을 동적 처리라고 할 수 있는데 이 동적 처리는 웹브라우저의 해석 시점에 가능하거나 해석이 완전히 끝난 후 사용자에 의해서 요청되어 처리되기도 한다.

과거의 웹 문서는 단순한 정보 전달을 목적으로 하다보니 동적으로 콘텐츠를 처리할 일이 별로 없었다. 하지만 오늘날의 웹 문서는 문서라고 불리는게 무색할 만큼 프로그래밍 기법적으로 작성되고 처리될 수 있게 되었다. 그래서 과거의 단순했던 DOM API는 점차 거대한 규모로 커지기 시작했다. 그리고 자연스레 DOM은 자바스크립트에서 다루는 가장 중요한 대상이 되었다.

이제는 DOM API를 모르고는 웹사이트 제작이 어렵게 되었다. 높은 품질의 웹사이트 개발을 위해서는 다양한 DOM API에 관심을 가져야 하며 새롭게 추가되는 것들에 대한 학습을 게을리하면 안될 것이다.