본문 바로가기

javascript

[DOM-01]Document Object Model : DOM의 뜻

자바스크립트(javascript) 강의를 시작하기 전에

DOM에 대해 간략하게 알아보고 시작 하겠습니다.


자바스크립트로 HTML과 CSS를 제어하기 위해서는 필수로 알고 계셔야겠죠.


우선 DOM 단어의 뜻을 알아 보겠습니다.


DOM은 document object model의 약자이며, 한글로는 "문서 객체 모델"이라고 부릅니다.

DOM은 객체 지향 모델로써 구조화된 문서를 표현하는 방식입니다.


Document Object Model , 이하 DOM.


아래 이미지가 DOM의 모든것을 말해주고 있네요.


DOM-model.svg
(위키백과) By Birger Eriksson - 자작, CC BY-SA 3.0, 링크



HTML, CSS가 사용자에게 직접적으로 보이는 것이라면 DOM은 기계나 소프트웨어가 웹 사이트의 구조를 어떻게 이해하는지에 대한 표준이라고 할 수 있습니다. 기계를 위한 표준을 여기서 이야기하는 이유는 자바스크립트 역시 DOM을 통하여 HTML과 CSS로 구성된 웹의 구조에 접근하고 컨트롤할 수 있기 때문입니다.



웹 브라우저 역시 HTML로부터 DOM을 구성하고 분석하여 화면에 표시합니다. 자바스크립트 같은 프로그래밍 언어가 DOM구조에 접근할 수 있는 방법을 제공하여 문서구조, 스타일, 내용 등을 변경할 수 있게 합니다.


DOM은 프로그래밍 언어는 아니지만 DOM이 없다면 자바스크립트 언어는 웹페이지 또는 XML 페이지 및 요소들과 관련된 모델이나 개념들에 대한 정보를 갖지 못합니다. 다시말해 HTML의 모든 요소들을 DOM과 자바스크립트와 같은 스크립팅 언어를 통해 접근하고 조작할 수 있는 것입니다.




** DOM은 HTML, XML 문서의 프로그래밍 interface 입니다. 

** DOM은 자바스크립트와는 독립적인 기술 표준입니다. 

** DOM은 HTML, CSS와 같은 W3C의 기술의 한 종류입니다. 

** DOM은 문서의 구조화된 표현(structured representation)입니다.


간략한 DOM의 소개는 여기서 마치도록 하겠습니다.



728x90
300x250