HTML DOM(Document Object Model)

FrontEnd

KJihun 2025. 3. 18. 09:01

728x90

🔹 DOM이란?

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

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

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

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

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

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