DOM이란?
DOM을 풀어서 쓰면 Document Object Model, 즉 문서 객체 모델을 의미합니다. JavaScript를 이용해서 HTML과 CSS를 제어하기 위해서는 필수입니다.
웹 세계에서 모든 HTML 웹페이지는 문서라고 합니다. 문서 객체 모델은 요소에 더 쉽게 액세스하고 관리할 수 있도록 트리와 같은 구조로 나타냅니다.
DOM의 쓰임
DOM은 프로그래밍 언어는 아니지만 소프트웨어가 웹의 구조를 어떻게 이해하는지에 대한 표준입니다. JavaScript 같은 프로그래밍 언어가 DOM구조에 접근할 수 있는 방법을 제공하여 문서 구조, 스타일, 내용 등을 변경할 수 있게 하여, HTML과 CSS로 구성된 웹의 구조에 접근하고 컨트롤할 수 있습니다.
JavaScript는 이런 문서 객체 모델을 이용하여 다음과 같은 작업을 할 수 있습니다.
- 자바스크립트는 새로운 HTML 요소나 속성을 추가할 수 있습니다.
- 자바스크립트는 존재하는 HTML 요소나 속성을 제거할 수 있습니다.
- 자바스크립트는 HTML 문서의 모든 HTML 요소를 변경할 수 있습니다.
- 자바스크립트는 HTML 문서의 모든 HTML 속성을 변경할 수 있습니다.
- 자바스크립트는 HTML 문서의 모든 CSS 스타일을 변경할 수 있습니다.
- 자바스크립트는 HTML 문서에 새로운 HTML 이벤트를 추가할 수 있습니다.
- 자바스크립트는 HTML 문서의 모든 HTML 이벤트에 반응할 수 있습니다.
DOM의 구조와 생성
DOM에는 각 노드가 HTML요소를 나타내는 많은 노드들이 있습니다. <HTML>태그는 항상 맨 위에 있으므로 "Rood Node"라고 합니다. 나머지 노드는 그 아래 있으므로 "Child Node"라고 합니다. 맨 아래에 있는 노드를 "Leaf Node"라고 하며 일반적으로 요소의 속성, 값 또는 이벤트로 채워집니다.
예시 코드
<html>
<head>
<title> MY WEB </title>
</head>
<body>
<div id="contents">
<p> Hi! </p>
</div>
</body>
</html>
'ETC > Frontend' 카테고리의 다른 글
| [HTTP] GET과 POST의 차이 (0) | 2022.07.07 |
|---|---|
| [JavaScript] 이벤트 리스너 (Event Listener) 사용법 ( + 이벤트 종류) (0) | 2022.02.08 |
| [JavaScript] Event Handler (이벤트 핸들러)와 Event Listener (이벤트 리스너)의 차이 (0) | 2022.01.26 |
| [JavaScript] Document 객체 (0) | 2022.01.26 |
