DOM(Document Object Model)

DOM

• Document Object Model, 웹 화면에 보이는 요소를 조작하기 위한 기능으로 가득찬 라이브러리 덩어리.

 

DOM은 정의 부분(명세서) 와 구현부분으로 구성

• 정의 부분(명세서) : 웹 페이지(또는 XML) 문서를 조작할 때 지켜야 할 약속(규칙, 규약)이 명시되어 있는 문서일 뿐 실제 동작하는 구현 소스코드는 존재하지 않는다. 이는 함수 이름만 있고 구현 코드가 없는 것과 같다.
  웹 표준 관련 표준을 정의하는 W3C에서 명세서 제공

• 구현 부분 : 브라우저 내부에 존재. 브라우저(IE, Chrome, FireFox, Safari) 업체는 저마다의 기술력을 바탕으로 텅 빈 DOM 내부를 채워 실제 동작하는 DOM 기능을 구현.

 

IDL(Interface Definition Language)

• DOM의 정의 부분을 만들 때 사용하는 인터페이스 정의 전용 언어.
• 브라우저 마다 IDL로 작성된 명세서에 따라 저마다 구현 방법이 다르다.
• DOM 문서는 인터페이스 정의 문서(IDL)로 작성되어 있다는 것만 인지. 

 

 

※ 브라우저가 웹 페이지를 처리하는 과정

1. HTML 페이지 로딩 / 웹 페이지 읽기
   브라우저가 HTML 페이지를 읽는다

2. 파싱단계
   웹 페이지 내용을 해석, 마크업 태그와 1:1 매칭이 되는 DOM 클래스의 객체를 생성
   이렇게 생성된 객체는 저마다 고유 기능을 가진다.

3. 브라우저 화면에 출력
   브라우저는 생성한 DOM 객체를 가지고 웹페이지 화면에 출력한다.

파싱단계

웹 브라우저가 HTML 페이지를 읽은 후 파싱단계에서 <div> 를 만나면 HTMLDivEelement라는 클래스의 인스턴스(객체)를 생성

<img> 태그를 만나면 HTMLImageElement 클래스의 인스턴스를 생성한다.

 

=> HTML 페이지를 작성하는 마크업은 웹브라우저에게 알려주는 일종의 DOM 클래스의 메타정보일 뿐

     브라우저는 이 마크업 태그와 1:1 매칭되는 DOM 클래스의 객체를 생성해 보관하고 있게 된다.

 

DOM 객체가 생성되는 순서

웹 브라우저는 가장 먼저 최상위에 해당하는 HTMLDocument 클래스의 객체를 생성. 이후 생성하는 모든 DOM 객체는 HTMLDocument 객체의 자식 객체로 만들어진다. 즉, 부모와 자식간의 관계를 형성하며 일종의 트리 구조를 갖추게 된다. 

 

 

 

 

핵심 DOM 객체

1) Node

기능 : 노드를 탐색하고 조작하는 기본적인 프로퍼티와 메소드

 

주요 프로퍼티 

• Attr[] attributes

• Node[] childNodes

• Node firstChild

• Node lastChild

• Node nextSlibing

• Node previousSlibing

• Node parentNode

• String nodeValue

• String nodeName

• Unsigned short node Type

 

주요 메서드

• hasAttributes()

• hasChildNodes()

• cloneNode()

• appendChild()

• insertBefore()

• removeChild()

• replaceChild()

 

2) Document

상속구조 : Node -> Document

기능 : 텍스트노드, 엘리먼트 노드를 생성하는 팩토리 메서드

 

주요 메서드 

• createAttribute()

• createElement()

• createEvent()

• createTextNode()

• Element

• getElementById()

• getElementBy TagName()

• addEventListener()

• dispatcherEvent()

• removeListener()

 

3) HTMLDocument

상속구조 : Node -> Document -> HTMLDocument

기능 : HTML 문서 전용 프로퍼티와 메소드

 

주요 프로퍼티

• HTMLELement body

• String cookie

• HTMLCollection images

• HTMLCollenction links

 

주요 메서드

• close()

• open()

• write()

• Element[]

• getElementByName()

 

4) Element

상속구조 : Node -> Element

기능 : 속성을 다루는 기능. 이벤트 모델 구현

 

 주요 프로퍼티

• String tagName

 

주요 메서드

• Element[]

• ElementByTagName()

• hasAttribute()

• getAttribute()

• removeAttribue()

• setAttribute()

• addEventListener()

• dispatchEvent()

• removeListener()

 

5) HTMLElement

상속구조 : Node -> Element -> HTMLElement

기능 : HTML 태그 전용 프로퍼티와 메소드

 

주요 프로퍼티

• String className

• String id

• String innerHTML

• CSS2PRoperties style

• Int offsetWIdth

• Int offsetHeight

• Int offsetLeft

• Int offsetTop

 

주요 메서드 

• onkeydown

• onkeypress

• onkeyup

• onclick

• ondbclick

• onmousedown

• onmousemove

• onmouseout

• onmouseover

• onmouseup

 

출처 : 자바스크립트 + jQuery 완전정복 스터디