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 |
| 31 |
Tags
- NPM
- Functional Programming
- python
- Linux
- javascript
- node.js
- 함수형프로그래밍
- html
- 자료구조
- Generics
- https
- Let's Encrypt
- 알고리즘
- 파이썬
- Express
- typescript
- stream
- MSA
- ES6
- MSK
- vscode
- nestjs
- 비주얼 스튜디오 코드
- Certbot
- Schema Registry
- V8
- nodeJS
- ChatGPT
- docker
- GIT
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
