DOM 개요
DOM이란 Document Object Model 즉 문서 객체 모델이란 웹 브라우저가 HTML, XML등 문서를 이해하고 접근하기위한 표준이며, 일종의 인터페이스이다. DOM은 문서의 구조화된 표현을 제공하여, 프로그래밍 언어가 DOM 구조에 객체로서 접근할 수 있게끔하여 문서의 구조,스타일, 내용등을 변경할 수 있게한다.
웹 문서의 동적 변경을 위해 DOM은 DOM API를 통해 프로그래밍 언어가 접근하고 수정할 수 있는 방법들을 제공하는데, 일반적으로 프로퍼티와 메소드를 갖는 자바스크립트의 객체로 제공된다.
DOM 구조
DOM은 Tree구조로 이루어져있다.
<!doctype html>
<html>
<head>
<title>My title</title>
</head>
<body>
<h1>A heading</h1>
<a href="/">Link text</a>
</body>
</html>위의 HTML 문서는 아래와 같은 노드 트리로 표현된다.
노드를 이용한 Tree구조로 되어있어 각각의 노드를 객체화하여 접근할 수 있게된다.
DOM API 사용방법 예제
DOM에서 제공하는 API를 통해 프로그래밍 언어로 동적으로 DOM에 접근하여 문서를 수정할 수 있다.
예를들어 다음의 코드는 <h>태그를 가진 새로운 객체를 자바스크립트를 이용해 동적으로 추가한다.
var title = document.createElement('h1'); // document객체에 접근하여 h1 태그 생성
var text = document.createTextNode('Seoplee'); // document객체에 접근하여 'Seoplee' String을 지닌 TextNode 생성
title.appendChild(text); // 동적으로 생성한 h1 태그에 자식노드 추가
document.body.appendChild(title); // document객체를 통해 body객체에 접근하고 동적으로 생성한 객체 추가DOM API에 대한 좀 더 자세한 사용예제들은 이곳 에서 볼 수 있다.
Reference
http://www.tcpschool.com/javascript/js_dom_concept
https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction
'WEB' 카테고리의 다른 글
| [React] useState의 동작원리에 관하여 (0) | 2022.12.28 |
|---|---|
| next-sitemap을 사용하여 동적 생성 페이지 sitemap 생성하기 (0) | 2022.12.19 |
| CSS em & rem (0) | 2022.06.26 |
| JavaScript 기본 동작 원리 (with Stack, Queue, Event Loop) (0) | 2022.06.25 |
| CORS(Cross-Origin Resource Sharing) 기본 (0) | 2022.06.24 |