DOM
#
Find similar titles
- 최초 작성자
-
최근 업데이트
bjpark@insilicogen.com
Table of Contents
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는 노드의 집합이다)
Node의 계층구조 #
HTML과 XML 문서는 모두 DOM을 통해 Node의 계층 구조를 표현한다. 노드 타입에는 여러 가지가 있으며, 각 타입은 문서에서 서로 다른 정보나 마크업을 표현한다.
각 노드 타입은 서로 다른 특징, 데이터, 메서드를 가지고, 다른 노드와 관계가 있을 수 있다.
이러한 관계가 계층 구조를 생성하고 마크업은 이 관계를 통해 특정 노드에 뿌리(root)를 둔 트리 구조로 표현한다.
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<p>hello world</p>
</body>
</html>
결론 #
body부분에 들어가는 객체 요소들은 매 페이지들마다 다르다. 따라서 이 객체들을 제어(생성, 변경, 삭제, 접근)하기 위해서는 DOM을 사용하는 방법을 알아야 한다.
출처 링크 #
Incoming Links #
Related Data Sciences (DataScience 0) #
Suggested Pages #
- 0.556 자바스크립트/라이브러리
- 0.209 Jupyter
- 0.128 lodash.js
- 0.037 자바스크립트/라이브러리/Cytoscape.js
- 0.033 Jupyter/Practice
- 0.023 KOBIC-Edu33
- 0.013 Jupyter in Django
- More suggestions...
