Notice
Recent Posts
Recent Comments
Link
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | ||||||
| 2 | 3 | 4 | 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 | 13 | 14 | 15 |
| 16 | 17 | 18 | 19 | 20 | 21 | 22 |
| 23 | 24 | 25 | 26 | 27 | 28 | 29 |
| 30 |
Tags
- stream
- vscode
- javascript
- 파이썬
- node.js
- nodeJS
- V8
- MSA
- 함수형프로그래밍
- Let's Encrypt
- ES6
- html
- Schema Registry
- Functional Programming
- Linux
- 알고리즘
- ChatGPT
- Certbot
- 자료구조
- https
- typescript
- docker
- python
- NPM
- GIT
- MSK
- Generics
- 비주얼 스튜디오 코드
- Express
- nestjs
Archives
- Today
- Total
JangBaGeum.gif
[JavaScript] DOM : Document Object Model (문서 객체 모델) 본문
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의 차이 (1) | 2022.07.07 |
|---|---|
| [JavaScript] 이벤트 리스너 (Event Listener) 사용법 ( + 이벤트 종류) (0) | 2022.02.08 |
| [JavaScript] Event Handler (이벤트 핸들러)와 Event Listener (이벤트 리스너)의 차이 (1) | 2022.01.26 |
| [JavaScript] Document 객체 (0) | 2022.01.26 |
'ETC/Frontend' Related Articles
more
