DOM(Document Object Model)이란?

1. DOM(Document Object Model)이란?

웹 화면에 보이는 요소를 조작하기 위한 기능으로 된 라이브러리 덩어리를 말하며, DOM과 자바스크립트 DOM은 같은 의미입니다.

2. DOM 객체

Document, Element, Node, Atrribute, Text, HTML Document, HTML Element, HTMLAnchol Element <a>, HTMLDiv Element <div> 등이 있습니다.

3. DOM 기능

큰 단위로 웹 페이지에서 홍보용 이미지를 인터넥티브하게 보여주는 이미지 슬라이더, 메뉴항목에 마우스를 올려 놓으면 부드럽게 열리는 아코디언 메뉴, 쇼핑몰 메뉴, 서버에서 데이터를 받아 화면에 멋지게 출력하는 기능을 제작할 때 활용됩니다.  작은 단위로는 스크립트를 이용한 웹 페이지의 글자 색과 크기를 변경하고 싶을 때나 이미지 위에 마우스가 올려진 경우, 그위로 말풍선을 띄우고 싶을 때 활용합니다.

4. DOM의 구조

정의부분(명세서)과 구현 부분으로 나눠집니다.    - 정의 부분인 명세서에는 웹페이지(또는 XML) 문서를 조작할 때 지켜야 할 약속이 명시되어 있는 문서일 뿐 실제 동작하는 구현 소스코드는 전혀 존재하지 않습니다. 이는 함수 이름만 있고 함수 내부에 있어야 할 구현코드가 없는 것과 같습니다. 이러한 명세서를 만드는 곳이 웹 관련 표준을 정의하는 협회 W3C입니다.    - 구현 부분은 브라우저 내부에 존재합니다. 브라우저라 함은 IE, Chrome, Firefox, Safari, Opera Edge 등이 있으며 각각의 제조사 마다 기술력을 바탕으로 텅 빈 DOM 내부를 채워 실제 동작하는 DOM기능을 구현합니다. * W3C에서 작성한 규정대로 이벤트 기능은 addEventListener() 메서드에 구현돼 있어야 하며 매개변수 첫 번째는 이벤트 리스너로 사용할 함수가 와야 한다라고 정해져 있는데 이러한 규정대로 이벤트 기능을 구현한 경우  웹 표준을 지원하는 브라우저라(표준 브라우저)하며, IE7과 같은 경우 addEventListener() 메서드 대신 attachEvent() 메서드를 사용하여 이벤트를 등록하기 때문에 웹 표준을 지원하지 않는 브라우저(비표준 브라우저)라고 부릅니다.

5. IDL(Interface Definition Language)이란?

Dom의 정의 부분을 만들 때 사용하는 인터페이스 정의 전용 프로그래밍 언어를 말하며 전용 문법이 있습니다. <div>태그의 실제 기능을 하는 HTMLDivElement DOM 명세서를 보면 선언만 있고 동작 코드는 없습니다. 브라우저 업체들은 IDL로 작성한 명세서에 따라 다른 구현 방법으로 동작 코드를 제작합니다. 웹프로그램 개발시에 DOM 문서는 인터페이스 정의 문서(IDL)로 작성돼 있다라고 알고 있스면 됩니다.