반응형
DOM
DOM(Document Object Model)은 Document에서 Element를 만들거나, 변경하거나, 제거할 수 있도록 하는
프로그래밍 인터페이스입니다. 이 외에도 Element에 이벤트를 추가하여 웹 페이지를 역동적으로 만들 수 있습니다.
DOM을 분류하는 3가지 모델
- Core DOM: 모든 Document 타입의 standard Model
- XML DOM: XML Document의 standard Model
- HTML DOM: HTML Document의 standard Model
DOM을 분류하는 모델은 위와 같이 3가지로 나눠집니다. 그 중에서 HTML DOM에 대해서 더 자세히 알아보겠습니다.
HTML DOM
- HTML DOM은 HTML을 위한 표준 객체 모델이자 프로그래밍 인터페이스입니다.
- DOM은 HTML Document를 node의 트리 형식으로 보여줍니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>DOM tree structure</title>
</head>
<body>
<h1>DOM tree structure</h1>
<h2>Learn about the DOM</h2>
</body>
</html>위와 같이 HTML 코드를 작성하고, 웹 페이지를 로드하면 브라우저는 페이지의 DOM을 만들어냅니다. 이 때, HTML DOM은 객체(Object)들의 트리(tree)로 구성되어 있습니다. 트리 구조는 다음과 같습니다.
Document
DOM의 트리 구조 맨 상단에 위치해 있는 객체는 Document 객체 입니다. Document는 웹 페이지 그 자체를 의미합니다. 웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때는 반드시 Document부터 시작해야 합니다. DOM은 Document의 일부를 효과적으로 추가, 제거 및 수정할 수 있는 기능을 제공합니다.
- Document
- 뿌리 노드(root node) 입니다.
- 각 Document는 하나의 Document element만 가질 수 있습니다.
- HTML Document에서 Document element는 element입니다.
- Document 메소드
- HTML 요소의 선택
- HTML 요소의 생성
- HTML 이벤트 핸들러 추가
- HTML 객체의 선택
- HTML
- Document의 child node(자식 노드)입니다.
- element와 element, 두 개의 child element를 포함합니다.
- parent 노드 & child 노드: tree 구조에서 위쪽의 노드를 부모(parent) 노드, 아래쪽 노드들을 자식(child) 노드라고 합니다.
- root 노드: root 노드는 부모 노드가 없는, 가장 위에서 시작되는 노드들을 의미합니다.
- leaf 노드: leaf 노드는 반대로 child 노드가 없는 노드를 의미합니다.
반응형
'IT 정보 > IT 용어' 카테고리의 다른 글
| 프로그래밍 기본 용어 (0) | 2022.10.13 |
|---|---|
| DOM - JavaScript (0) | 2022.10.07 |
| 정적 페이지 vs 동적 페이지 (0) | 2022.10.06 |
| WEB Server, WAS (1) | 2022.10.05 |
| 딥러닝 (2) | 2022.09.22 |
댓글