DOM(Document Object Model, 문서 객체 모델) 이란?
DOM은 문서 객체 모델 이라는 뜻으로 HTML이나 XML 같은 문서의 요소(태그)들을 조작 가능하도록 객체화시킨 것입니다. 또한 이렇게 객체화 시켜놓았기에 DOM은 자바스크립트 API를 이용해 조작할 수 있습니다. 브라우저는 HTML 문서를 로드하고 처리할 때 문서 객체 모델(DOM)을 생성합니다.
DOM은 트리 형태의 자료구조를 가지며, DOM을 구성하는 요소로는 요소노드, 텍스트노드, 속성노드 등이 있습니다. 요소 노드는 <body>, <p>, <ul> 같은 일반적인 태그를 말하고, 텍스트 노드는 요소 노드 안에 들어있는 텍스트들을 말합니다.
예를 들어 <b>피콜로 서점</b> 와 같은 요소가 있다면 <b></b>가 요소노드이며 "피콜로 서점" 이 텍스트 노트입니다.
DOM 생성 과정
위에서 말했지만 DOM은 브라우저가 HTML 문서를 읽어들일때 문서에 정의된 요소들을 해석하여 생성합니다. 그리고 이러한 방식을 정적인 생성이라고 합니다. 반대로 문서에는 정의되지 않았지만 우리가 자바스크립트를 통해 직접 조작하여 생성하는 것을 동적 생성이라고 합니다.
DOM 구조 및 특성
1. HTML문서의 태그들은 DOM에서 트리로 표현되는 계층적 구조를 갖습니다.
2. DOM 트리의 최상위 노드는 document 객체입니다.
3. document 객체의 documentElement 프로퍼티는 문서의 최상위 원소를 표현하는 <HTML>태그 객체를 참조합니다.
4. document 객체를 이용하면 문서의 모든 요소를 조작할 수 있다.
다음의 HTML 문서의 요소들은 개념적으로 아래와 같은 트리 구조를 가집니다.
|
<!DOCTYPE html>
<html>
<head>
<title>jQuery</title>
</head>
<body>
<h1>Dom</h1>
<p>Text</p>
</body>
</html> |
cs |
DOM 관련 용어
위의 DOM 예제를 바탕으로 각 객체별 관계와 용어들을 설명하면 다음과 같습니다.
1. <TITLE>은 <HEAD>의 자식(child) 입니다.
2. <HEAD>는 <TITLE>의 부모(parent)이다.
3. <BODY>라는 같은 부모를 둔 요소 <H1>과 <P>는 서로 형제(sibling) 이다.
4. 같은 논리로 <HEAD>와 <BODY>는 서로 형제이다.
5. <HTML>의 하위에 있는 자식을 포함한 모든 요소들은 <HTML> 요소의 자손(descendant) 입니다.
6. 반대로 문자열 요소 "Text"의 부모 <P>를 포함한 상위 요소 <P>, <BODY>, <HTML>, <Document> 들은 조상(ancestor) 입니다.
DOM 객체 생성하기
DOM객체 생성을 해보기 위해 HTML 문서를 다음과 같이 작성합니다.
|
<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function () {
var boldTag = document.createElement('b') ;
var text = document.createTextNode('this is text');
}
</script>
</head>
<body>
<h1>Dom</h1>
</body>
</html> |
cs |
DOM 객체들은 문서와 관련된 객체들이므로 document 객체를 통해 조작합니다.
|
createElement(태그명) |
태그명으로 입력한 태그의 DOM 객체를 생성 |
|
createTextNode(텍스트 문자열) |
텍스트 노트 생성 |
생성한 DOM 객체 노드 연결하기
위의 HTML 예제를 실행시켜보면 아무것도 나오지 않는데, 이유는 DOM 객체를 생성만 했지 document 하위에 연결시켜주지 않았기 때문입니다. 그러나 다음과 같이 body의 하위에 연결해주면 실제로 해당 요소가 나타납니다.
|
<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function () {
var boldTag = document.createElement('b') ;
var text = document.createTextNode('this is text');
boldTag.appendChild(text);
document.body.appendChild(boldTag);
}
</script>
</head>
<body>
<h1>Dom</h1>
</body>
</html> |
cs |
[대상 DOM 객체].rappendChild(추가할 DOM 객체) 함수는 대상 DOM 객체의 자식 노드로 추가할 DOM 객체를 연결합니다. 그리고 document.body는 <body> 태그를 가리키는 DOM 객체입니다. 따라서 이전에 생성한 <b> 태그에 text 노드를 연결하고 다시 <b>태그를 body에 연결한 것입니다.
실행 결과
지금까지 DOM의 개념 및 노드 생성 및 연결 하는 방법을 간단하게 알아보았습니다. 다음글에서는 노드 속성 수정 및 탐색, 삭제 방법을 알아보겠습니다.
다음글
'JavaScript' 카테고리의 다른 글
| [자바스크립트] DOM 객체 innerHTML 속성 (0) | 2018.06.08 |
|---|---|
| [자바스크립트] DOM 노드 ID, 태그명, name 속성으로 탐색하기 (0) | 2018.05.31 |
| [자바스크립트] Date 객체 (0) | 2017.11.13 |
| [자바스크립트] Number 객체 (0) | 2017.11.13 |
| [자바스크립트] Infinity 와 NaN (0) | 2017.11.13 |
도로락
IT, 프로그래밍, 컴퓨터 활용 정보 등을 위한 블로그