문서 객체 모델에서는 태그, 문서 객체, 노드라는 용어를 사용하게 된다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<script>
window.onload=function(){
let header=document.getElementById('header');
};
</script>
</head>
<body>
<h1 id="header">HEADER</h1>
</body>
</html>
|
cs |
HTML 페이지에 존재하는 html이나 body 태그를 '태그'라고 부른다. 이 태그를 자바스크립트에서 이용할 수 있는 객체로 만들면 그것이 '문서 객체'이다. 위의 코드에 doucument 객체의 getElementById() 메서드로 id가 header인 <h1>를 가져와서 조작할 수 있는데, 이때 header 객체를 '문서 객체'라고 부른다.
| <html> | ||
| <head> | <body> | |
| <title> | <script> | <h1> |
| 'Document' | 'header' | |
위의 표는 앞서 만든 코드를 풀어서 쓴 것이다. 노드는 요소 노드(Element Node)와 텍스트 노드(Text Node)로 구분을 하게 되는데 '태그'가 들어간 <html>, <head>, <body>, <title>, <script> 그리고 <h1> 같은 태그가 있는 노드를 요소 노드(Element Node)라고 부르고, 문자열이 들어간 'Document'와 'header' 부분을 텍스트 노드(Text Node)라고 부르게 된다.
| 노드(Node) | |
| 요소 노드(Element Node) | |
| 텍스트 노드(Text Node)를 가지는 요소 노드 | 텍스트 노드를 가지지 않는 요소 노드 |
| <h1> 태그, <title> 태그 등등 | <img> 태그 |
좀 더 자세하게 노드를 살펴보면 위와 같다. 노드라는 큰 틀 안에 요소 노드가 있고, 요소 노드를 크게 '텍스트 노드를 가지는 요소 노드'와 '텍스트 노드를 가지지 않는 요소 노드'로 나눌 수 있다. <h1> 태그 같이 안에 문자열을 넣어야 하는 태그를 요소 노드 중에서도 '텍스트 노드를 가지는 요소 노드'라고 부르고, <img> 태그 처럼 태그 안에 문자열을 입력하지 않는 태그를 요소 노드 중에서도 '텍스트 노드를 가지지 않는 요소 노드' 라고 부른다.
'프로그래밍 공부 > JavaScript' 카테고리의 다른 글
| JavaScript - 문서 객체 선택 (0) | 2019.12.17 |
|---|---|
| JavaScript - 문서 객체 생성 (0) | 2019.12.16 |
| JavaScript - 브라우저 객체 모델 / onload 이벤트 속성 / Audio 객체 (0) | 2019.12.15 |
| JavaScript - 브라우저 객체 모델 개요 (0) | 2019.12.13 |
| JavaScript - 기본 내장 객체 심화 (0) | 2019.12.13 |
