Skip to content

DOM #
Find similar titles

DOM(Document Object Model) #

DOM이란 #

DOM은 문서 객체 모델의 약어로 HTML과 XML 문서를 위한 API(Application Programmi ng Interface)로서 문서의 물리적 구조와 문서가 접근되고 다루어지는 방법을 정의한다.

DOM의 목적 #

1.다양한 환경과 애플리케이션에서 사용할 수 있는 표준적인 프로그래밍 인터페이스 제공

2.프로그램 또는 스크립트를 통해 HTML이나 XML같은 웹 문서의 내용과 구조 그리고 스타일 정보의 검색 또는 수정이 가능하도록 해주는 플랫폼 또는 언어에 중립적인 인터페이스이다.

DOM Level #

DOM 스펙은 W3C에서 Level 단위로 만들어지고 있는데, 처음에 만든 권고안 DOM Level 1 이었고, 현재는 DOM Level 3 권고안까지 만들어진 상태이다.

*DOM Level 1 
core, HTML, 그리고 XML 문서모델에 대한 내용이다. 레벨1은 문서에 대하여 항해(navigation)하거나 조작(manipulation)하는 기능을 포함한다.

*DOM Level 2
스타일 쉬트를 적용한 개체모델을 지원하고 문서에 스타일 정보를 조작하는 기능을 정의 한다. 또한 문서에 대한 풍부한 질의 기능과 이벤트 모델에 대한 정의 기능도 포함한다.

*DOM Level 3 
윈도우즈 환경 하에서 사용가능한 사용자 인터페이스를 기술하는 것까지 포함한다. 이를 이용하여 사용자는 문서의 DTD를 조작하는 기능과 보안 레벨까지 정의할 수 있다.

DOM 구조 #

  • 문서를 트리구조로 표현
  • 노드: 어떤 연결망에서 특정 지점과 지점을 연결하는데 표시하는 것을 말한다.(그림에서 보면 html, body 등을 말한다. head노드는 title과 meta를 연결한다.)
  • 따라서 DOM구조를 노드 트리라고 말한다.(문서 document는 노드의 집합이다)

Image

Node의 계층구조 #

HTML과 XML 문서는 모두 DOM을 통해 Node의 계층 구조를 표현한다. 노드 타입에는 여러 가지가 있으며, 각 타입은 문서에서 서로 다른 정보나 마크업을 표현한다.

각 노드 타입은 서로 다른 특징, 데이터, 메서드를 가지고, 다른 노드와 관계가 있을 수 있다.

이러한 관계가 계층 구조를 생성하고 마크업은 이 관계를 통해 특정 노드에 뿌리(root)를 둔 트리 구조로 표현한다.

<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<p>hello world</p>
</body>
</html>

결론 #

body부분에 들어가는 객체 요소들은 매 페이지들마다 다르다. 따라서 이 객체들을 제어(생성, 변경, 삭제, 접근)하기 위해서는 DOM을 사용하는 방법을 알아야 한다.

출처 링크 #

  1. 뼛속까지 개발자,뼈발자 블로그
  2. 信念InTheTistory
  3. LMK BLOG 블로그

Incoming Links #

Related Data Sciences #

0.0.1_20140628_0