1. DOM이란 무엇인가?
DOM이란 Document Object Model의 약자로 번역하면 문서 객체 모델이다.
그렇다면 문서 객체가 무엇을 의미할까?
문서 객체는 <html>이나 <body>같은 html문서의 태그들을 JavaScript가 이용할 수 있는 객체(Object)로 만든것을 의미한다. 모델(Model)은 모듈정도로 해석하면 될것같다.
정의해보자면 문서 객체 모델은 HTML, XML 문서의 프로그래밍 인터페이스(접속기)이다.
DOM은 웹 브라우저(크롬, 사파리 등)가 HTML페이지를 인식하는 방식을 의미하며 document 객체와 관련된 객체의 집합체이다. DOM은 아래의 사진처럼 위에서 아래로 뻗어나가는 트리구조로 생겼다.
우리는 DOM의 객체에 먼저 접근하고 키워드를 통해 필요한 요소에 접근하여 우리가 필요로 하는 작업들을 할 수 있다.
위 사진의 모든 박스는 노드(node)라고도 표현한다. DOM에 포함된 각각의 개체를 node라고 한다. 루트요소, 요소, 속성, 텍스트 모두 node에 속한다.
이때 HTML 태그를 요소노드(Element Node)라고 부르고 요소 노드 안에 있는 글자를 Text 노드(Text Node)라고 부른다.
2. 자바스크립트로 문서 객체를 생성한다?
자바스크립트는 문서 객체를 생성한다.
먼저 문서 객체가 생성되는 방식은 두가지로 볼 수 있다.
첫번째는 웹 브라우저가 HTML페이지에 적혀있는 태그를 읽으면 생성한다고 표현한다.(정적생성)
두번째는 HTML 페이지에 없던 문서객체를 자바스크립트를 이용하여 생성할 수 있다.(동적생성)
3. DOM은 어떻게 사용하나?
아래의 예제는 웹 브라우저가 HTML페이지에 적혀있는 태그를 읽어(문서 객체 생성) 웹 브라우저에 나타내었다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM이란?</title >
</head>
<body>
<h1 id ="header1">HEADER-1</h1 >
<h1 id = "header2">HEADER-2</h1 >
</body>
</html>
위의 코드를 웹 브라우저를 통해 보면 다음과 같다.
이번에는 자바스크립트를 통해 문서 객체를 생성해보는 예제이다.
1. document 객체에 접근해서 <h2> 태그를 생성한다.
var header = document.createElement('h2');
2. document 객체에 접근해서 TextNode를 생성하고 'DOM이란 무엇인가요?'라는 스트링을 넣어준다.
var textNode = document.createTextNode('DOM이란 무엇인가요?');
3. 위에서 생성한 <h2> 태그에 자식노드(Text Node)를 추가한다.
header.appendChild(textNode);
4. 마지막으로 document객체를 통해서 body 객체에 접근히여 body객체에 자식 노드를 추가한다.
document.body.appendChild(header);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM이란?</title>
</head>
<body>
<h1 id="header1">HEADER-1</h1>
<h1 id="header2">HEADER-2</h1>
</body>
<script>
var header = document.createElement('h2');
var textNode = document.createTextNode('Hello DOM');
header.appendChild(textNode);
document.body.appendChild(header);
</script>
</html>
**참고
'JAVASCRIPT' 카테고리의 다른 글
| Javascript 데이터 구조 - 객체(Object) (0) | 2022.04.28 |
|---|---|
| Javascript 데이터 구조 - 배열(Array) (0) | 2022.04.28 |
| Javascript 데이터 타입 - number, string, boolean, null, undefind (0) | 2022.04.28 |
| Javascript 변수 선언 - const, let, var (0) | 2022.04.27 |
| 자바스크립트로 진동 기능 구현하기 (0) | 2022.02.09 |
