HTML DOM(Document Object Model)

FrontEnd

HTML DOM(Document Object Model)

KJihun 2025. 3. 18. 09:01

728x90

🔹 DOM이란?

DOM (Document Object Model) 은 문서(Document) 를 객체(Object) 로 표현하는 모델(Model) 이다.

문서 객체: <html>, <body> 같은 HTML 태그를 JavaScript가 조작할 수 있도록 객체로 변환한 것.
모델: 문서 객체를 트리(Tree) 구조로 표현하여 브라우저가 HTML을 이해하는 방식.

🔹 DOM의 역할

웹 브라우저는 HTML 문서를 트리 구조로 변환하여 이해하고, JavaScript는 이를 활용해 검색, 수정, 추가, 삭제 등의 작업을 수행할 수 있다.

🔹 Tree 구조란?

Root Node: 최상위 노드로, DOM에서는 <html>이 해당된다.
Parent & Child: 상위 노드를 부모(Parent), 하위 노드를 자식(Child)이라 한다.
Leaf Node: 더 이상 자식이 없는 노드를 뜻하며, DOM에서는 텍스트 노드 같은 요소가 해당된다.

🔹 HTML이 DOM 트리로 변환되는 과정

브라우저가 HTML을 읽고 분석(Parsing) 한다.
HTML 요소들을 계층적인 트리 구조로 변환한다.
JavaScript가 이 트리를 이용해 동적으로 조작할 수 있다.

✅ 예제: HTML 코드

<!DOCTYPE html>
<html>
<head>
    <title>DOM Example</title>
</head>
<body>
    <h1 id="title">Hello, DOM!</h1>
</body>
</html>

✅ DOM 트리 구조

Document
 ├── <html>
 │    ├── <head>
 │    │    ├── <title>DOM Example</title>
 │    ├── <body>
 │         ├── <h1 id="title">Hello, DOM!</h1>

🔹 JavaScript로 DOM 조작하기

📌 요소 찾기 및 변경

document.getElementById("title").textContent = "Hello, JavaScript!";

📌 새로운 요소 추가

let newPara = document.createElement("p"); newPara.textContent = "새로운 문단이 추가되었습니다!"; document.body.appendChild(newPara);

저작자표시 (새창열림)

'FrontEnd' 카테고리의 다른 글

[React] Vite 를 사용하여 React 설치 및 기본설정 (0)	2025.04.26
[FrontEnd] jQuery 화살표 함수(=>)의 this (0)	2025.04.10
[JS] querySelector vs getElement (0)	2025.04.07
[JS] Bubbling, Capturing, Event Propagation, 이벤트 전파 (0)	2025.04.01
[JS] 비동기로 데이터 처리(async/await, fetch then) (0)	2025.04.01

현재글HTML DOM(Document Object Model)

Today :
Yesterday :

일	월	화	수	목	금	토
					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

develop

HTML DOM(Document Object Model)

🔹 DOM이란?

🔹 DOM의 역할

🔹 Tree 구조란?

🔹 HTML이 DOM 트리로 변환되는 과정

✅ 예제: HTML 코드

✅ DOM 트리 구조

🔹 JavaScript로 DOM 조작하기

📌 요소 찾기 및 변경

📌 새로운 요소 추가

'FrontEnd' 카테고리의 다른 글

'FrontEnd'의 다른글

티스토리툴바

HTML DOM(Document Object Model)

🔹 DOM이란?

🔹 DOM의 역할

🔹 Tree 구조란?

🔹 HTML이 DOM 트리로 변환되는 과정

✅ 예제: HTML 코드

✅ DOM 트리 구조

🔹 JavaScript로 DOM 조작하기

📌 요소 찾기 및 변경

📌 새로운 요소 추가

'FrontEnd' 카테고리의 다른 글

'FrontEnd'의 다른글

관련글

티스토리툴바