YEV.log

JavaSctipt | DOM 이란? 본문

Web/JavaScript

JavaSctipt | DOM 이란?

일렁이는코드 2021. 10. 24. 11:52
DOM (Document Object Model)
DOM Tree
문서객체를 생성하는 방식

DOM (Document Object Model)

문서 객체 모델(DOM, Document Object Model)은 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스입니다. 이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공합니다.

DOM은 웹 페이지의 HTML을 계층화시켜 트리구조로 만든 객체 모델이며, document라는 전역 객체를 통하여 HTML과 javacript를 잇는 역할을 합니다. 자바스크립트의 document객체는 DOM구조를 접근하는 관문이며 document 객체는 HTML 문서를 나타낸다고 할 수 있습니다.

 

DOM Tree

DOM을 제대로 이해하기 위해서는 tree 자료구조를 제대로 이해할 필요가 있습니다. tree의 자료구조는 위에서 아래로 퍼져나가는 하나의 root node에서 시작됩니다.

tree에서는 위쪽의 node를 부모(parent) 노드 아랫쪽 노드를 자식(child)라고 합니다. root node는 가장 위에서 시작되는 node이니까 parent가 없는 node가 됩니다. 그리고 children(자식)이 없는 node를 leaf node라고 합니다. 뿌리(root)에서 시작해서 잎(leaf)에서 끝나는 것이죠. 

 

node란?

node란 tree 구조에서 root 노드를 포함한 모든 개개의 개체를 표현하는 단어입니다. head, body, title, script, h1 등의 태그뿐 아니라 태그 안의 텍스트나 속성 등도 모두 node에 속합니다. 이중 HTML 태그를 요소노드(Element Node)라고 부르고 요소 노드 안에 있는 글자를 Text 노드(Text Node)라고 부르기도 합니다.

 

문서객체를 생성하는 방식

문서 객체가 생성되는 방식은 두 가지로 나누어 볼 수 있습니다. 우선 웹 브라우저가 HTML 페이지에 적혀 있는 태그를 읽으면 생성하는 것입니다. 이런 과정을 정적으로 문서 객체를 생성한다고 말합니다. 단순히 적혀져 있는 그대로 문서객체가 생성되는 것을 표현한 것입니다. 


반대로 원래 HTML 페이지에 없던 문서객체를 JavaScript를 이용해서 생성할 수 있습니다. 이런 과정을 동적으로 문서객체를 생성한다고 합니다. 따라서 JavaScript로 문서객체를 생성한다는 것은 처음에는 HTML 페이지에 없던 문서객체를 동적으로 생성하는 것이 됩니다. 

 

🥨HTML 페이지에 정적으로 문서객체 생성하는 방법

//HTML 
<!DOCTYPE html>
<html>
<head>
	<title>DOM</title>
	<meta charset="UTF-8" />
</head>

<body>
	<h1 id ="header_1" >HEADER: 1 </h1 >
	<div >
		<h2 id = "header_2">HEADER: 2</h2 >
	</div > 
    
    <script src="./src/index.js"></script>
</body>
</html>

 

 

🥨JavaScript를 이용하여 동적으로 문서객체 생성하는 방법 

//javascript

const header = document.createElement('h1');
const textNode = document.createTextNode('Dom HEADER');

header.appendChild(textNode);
document.body.appendChild(header);

1. 우선 document객체에 접근하여 <h1> 태그를 생성합니다.

const header = document.createElement('h1');

 

2. 그 다음은 document 객체에 접근해서 TextNode를 생성하고 'Dom HEADER'이라는 문자열을 넣어줍니다.

const textNode = document.createTextNode('Dom HEADER');

 

3. 위에서 생성한 <h2> 태그에 자식노드(text)를 추가합니다.

header.appendChild(textNode);

 

3. 그 다음은 document 객체에 접근해서 <h2>Dom HEADER</h2>라고 완성된 것을 html에 그려줍니다.

document.body.appendChild(header);

 

반응형
저작자표시 비영리

'Web > JavaScript' 카테고리의 다른 글

Javascript | 문자열, 글자 마스킹하는 함수  (0) 2022.02.20
Javascript | 로그인 기능 구현  (2) 2021.10.24
JavaScript | 객체 속성에 접근하는 방법 (점 표기법 / 대괄호 표기법)  (0) 2021.09.06
JavaScript | 배열 선언 / 추가,삭제/ 검색  (0) 2021.09.03
JavaScript | 반복문(for, while)  (0) 2021.08.31
'Web/JavaScript' Related Articles more