[ Javascript ] 문서 객체 모델 ( DOM, Document Object Model )
문서 객체 모델 ( DOM, Document Object Model )
문서 객체 모델 ( DOM, Document Object Model )은 넓은 의미로 웹 브라우저가 HTML페이지를 인식하는 방식이고, 좁은 의미로는 document 객체와 관련된 객체의 집합입니다.
문서 객체 모델을 사용하면 HTML 페이지에 태그를 추가, 수정, 제거할 수 있습니다.
문서 객체를 선택할 때 사용하는 메서드
| 메서드 | 설명 |
| document.getElementById(아이디) | 아이디를 사용해 문서 객체를 선택합니다. |
| document.querySelector(선택자) | 선택자를 사용해 문서 객체를 선택합니다. |
| document.getElementsByName(이름) | name속성으로 여러 개의 문서 객체를 선택합니다. |
| document.getElementsByClassName(클래스) | class속성으로 여러 개의 문서 객체를 선택합니다. |
| document.querySelectorAll(선택자) | 선택자로 여러 개의 문서 객체를 선택합니다. |
문서 객체의 내부 글자, 스타일, 속성을 조작할 때는 다음과 같은 것을 사용합니다. ( 웹 브라우저에서 지원한다면 속성 관련 메서드를 사용하지 않고도 곧바로 이름을 입력해서 사용할 수 있습니다. )
| 속성 | 설명 |
| innerHTML | 내부 글자를 조작합니다. |
| style | 스타일을 조작합니다. |
| 메서드 | 설명 |
| setAttribute(<속성 이름>, <속성 값>) | 속성을 지정합니다. |
| getAttribute(<속성 이름>) | 속성을 추출합니다. |
문서 객체 모델과 관련된 용어
HTML 페이지
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>제목</title>
<script></script>
</head>
<body>
<h1 id="header">제목</h1>
</body>
</html>위 코드처럼 HTML 페이지에 존재하는 html이나 body태그를 '태그'라고 부릅니다. 이 태그를 자바스크립트에서 이용할 수 있는 객체로 만들면 '문서 객체'가 됩니다.
문서 객체 예
window.onload = function() {
var header = document.getElementById('header');
};이 때 위 코드를 '문서 객체'라고 부릅니다.
위 코드에 문서 객체 모델
위 HTML 코드는 위 그림처럼 트리 모양으로 나타낼 수 있습니다. 그림의 각 요소를 '노드'라고 부릅니다.
요소 노드와 텍스트 노드 예 [ 요소 노드( Element Node )와 텍스트 노드( Text Node ) 구분하기 ]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>제목</title>
<script></script>
</head>
<body>
<h1 id="header">Text Node</h1>
<img src="image.jpg" alt="" />
</body>
</html>요소 노드란 HTML 태그를 의미하고, 텍스트 노드는 요소 노드 안에 들어 있는 글자를 의미합니다.
위 코드의 문서 객체 모델
웹 페이지가 처음 HTML 페이지에 적혀 있는 태그들을 읽으며 생성하는 것을 '정적으로 문서 객체를 생성한다'라고 표현합니다. 페이지에 적혀 있는 내용을 특별한 변화 없이 생성해 붙은 이름입니다. 반면에 자바스크립트로 원래 HTML 페이지에는 없던 문서 객체를 생성하는 것을 '동적으로 문서 객체를 생성한다'라고 표현합니다.