※ DOM 이란?
Document Object Model의 약자로 문서를 객체로 표현하기 위한 표준으로 HTML, XML등의 문서로 표현할때 사용 하는 API
문서의 구조적 형태를 제공하므로 자바스크립트와 같은 스크립트 언어를 사용하여 문서 내용과 시각적 표현을 수정할 수 있다.
※ W3C DOM vs 브라우저 DOM
DOM은 정의 부분과 구현부분으로 나누어진다.
W3C DOM - 정의부분, 문서를 조작할 때 지켜야 할 약속(규칙, 규약)이 명시되어 있는 문서일 뿐 실제 동작 구현하는
소스는 없다. 이 명세서를 만드는 곳은 웹 관련 표준을 정의하는 협회인 W3C이다.
IDL로 구성이 되어 있으며 IDL이란 Interface Definition Language의 약자로써 인터페이스 정의 언어 이다.
브라우저 DOM - 구현부분, 각 브라우저마다 내부에 존재한다. 브라우저 업체는 저마다의 기술력을 바탕으로 텅빈 DOM
내부를 채워 실제 동작하는 DOM 기능을 구현한다. 이때 W3C 에서 규정한 규칙대로 기능을 구현한 경우 우리는 웹 표준을 지원하는 브라우저라고 한다.
그래서 개발을 하다보면 같은 기능이라도 작동을 하는 브라우저가 있고 작동하지 않는 브라우저가 있다.
※ 브라우저가 웹페이지를 처리하는 과정
- HTML 페이지 읽기
- 웹페이지에 작성된 태그와 매칭되는 DOM객체를 생성
- 브라우저 화면에 출력
※ HTML 문서의 DOM 트리구조
노드란 HTML의 구성 요소중 가장 작은 단위로 우리가 자주사용하는 <p>, <div>와 같은 태그부터 주석까지 모두 노드에 해당한다.
위에서 웹프라우저는 HTML을 읽어 태그에 매칭되는 DOM객체를 생성한다고 했다.
이렇게 노드로 가득찬 웹 페이지를 읽어 들여 해석한 후 각 노드와 대응하는 DOM객체를 생성한다.
더 자세히 살펴보면 웹브라우저는 가장 최상위의 document객체를 생성한다. 이후 모든 객체는 document의 자식 객체로 만들어진다.
즉 부모와 자식 간의 관계를 형성하며 일종의 트리구조를 갖게 된다.
즉 DOM은 여러개의 객체들로 구성이 되어있다.
<html>
<head>
<title>문서구조</title>
</head>
<body>
<h1>제목</h1>
<form></form>
</body>
</html>
※ DOM 객체에 관해
위에서 말한것 처럼 DOM은 여러 개의 DOM객체로 구성이 되어있다.
또한 각자 고유의 책임과 기능을 가지고 있다. 객체들은 객체들을 조작하기 위한 프로퍼티(속성)와 메서드가 정의되어 있다.
예를들어 Node객체는 노드를 조작하기 위한 가장 기본적인 프로퍼티와 메서드가 정의돼 있는 Node 인터페이스를 구현한 객체이다.
Element 객체는 Node객체를 상속받아 Node 객체의 기능을 모두 사용가능하며 Element객체만의 기능을 가지고 있다.
우리는 자바스크립트를 사용할때 이런 객체들에 정의되어있는 프로퍼티와 메서드를 사용한다.
'플밍 is 뭔들 > JavaScript&jQuery' 카테고리의 다른 글
| [jQuery] $()란? (0) | 2017.07.08 |
|---|---|
| [JavaScript&Query] $(document).ready 와 window.onload의 차이 (0) | 2017.07.08 |
| [JavaScript&jQuery] 자바스크립트와 jQuery의 관계 (0) | 2017.07.08 |
| [자바스크립트]타이머 설정 (0) | 2017.01.17 |
| [자바스크립트]날짜 Date 타입 계산법 (0) | 2016.12.05 |