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 노드가 없는 노드를 의미합니다.JavaScript와 DOM
HTML DOM은 객체(Object)들의 트리(tree)로 구성되어 있고, Document 객체를 포함하고 있습니다. Document 객체는 자식 노드로 HTML 객체를 포함하고 있고요.
DOM(Document Object Model)은 Document에서 element를 만들거나, 변경하거나, 제거할 수 있다고 하였고, 그 과정에서 Document는 HTML elements를 선택하고, 제어할 수 있도록 메소드를 제공한다고 하였습니다.
그럼 이 메소드들은 어떤 방법으로 사용할 수 있을까요? 여기서 사용되는 것이 바로 JavaScript 입니다.
DOM은 HTML/CSS와 JavaScript를 이어주는 역할을 합니다. JavaScript를 사용하면 Document element에 접근하고 선택 및 변경할 수 있습니다.
JavaScript를 사용하여 DOM에서 작업할 수 있는 몇 가지 예를 살펴보겠습니다.
HTML elements 선택
HTML 요소를 선택하기 위해 제공되는 메소드는 다음과 같습니다.
| 메소드 | 설명 |
|---|---|
| document.getElementsByTagName(태그이름) | 해당 태그 이름의 요소를 모두 선택함. |
| document.getElementById(아이디) | 해당 아이디의 요소를 선택함. |
| document.getElementsByClassName(클래스이름) | 해당 클래스에 속한 요소를 모두 선택함. |
| document.getElementsByName(name 속성값) | 해당 name 속성값을 가지는 요소를 모두 선택함. |
| document.querySelectorAll(선택자) | 해당 선택자로 선택되는 요소를 모두 선택함. |
HTML elements 생성
새로운 HTML 요소를 생성하기 위해 제공되는 메소드는 다음과 같습니다.
| 메소드 | 설명 |
|---|---|
| document.createElement(HTML요소) | 지정된 HTML 요소를 생성함. |
| document.write(텍스트) | HTML 출력 스트림을 통해 텍스트를 출력함. |
HTML 이벤트 핸들러 추가
HTML 요소에 이벤트 핸들러를 추가하기 위해 제공되는 메소드는 다음과 같습니다.
| 메소드 | 설명 |
|---|---|
| document.getElementById(아이디).onclick = function(){ 실행할 코드 } | 마우스 클릭 이벤트와 연결될 이벤트 핸들러 코드를 추가함. |
참고문서
