HTML 구조이해1 - DOM(Document Object Model)이란?

웹 개발

HTML 구조이해1 - DOM(Document Object Model)이란?

Blue_bull 2025. 2. 9. 16:16

📌 DOM (Document Object Model)의 명확한 이해와 자유로운 활용

1️⃣ DOM이란?

DOM(Document Object Model)은 HTML, XML 문서를 트리 구조(Tree Structure) 로 표현한 객체 모델이야. 웹 브라우저는 HTML 문서를 읽고 해석하여 DOM을 생성하며, 이를 자바스크립트로 조작할 수 있어.

🔹 핵심 개념

HTML 문서는 태그로 이루어진 계층 구조
브라우저가 이를 객체 모델로 변환
JS로 DOM을 조작하면 웹페이지의 내용, 스타일을 실시간 변경 가능

2️⃣ DOM의 구조

DOM은 노드(Node) 들로 구성되며, 주요 노드 유형은 다음과 같아.

노드 타입	설명	예시
문서 노드 (Document Node)	문서 전체를 나타내는 최상위 노드	`document`
요소 노드 (Element Node)	HTML 태그 하나하나	`<div>`, `<p>`
속성 노드 (Attribute Node)	요소의 속성을 표현	`class="title"`
텍스트 노드 (Text Node)	요소 안의 실제 텍스트	`"Hello World!"`

3️⃣ DOM 트리 구조

다음 HTML 코드로 DOM 트리를 이해해보자.

<!DOCTYPE html>
<html>
<head>
    <title>DOM 예제</title>
</head>
<body>
    <div id="container">
        <h1>Hello</h1>
        <p class="desc">DOM을 배우자!</p>
        <ul>
            <li>아이템 1</li>
            <li>아이템 2</li>
        </ul>
    </div>
</body>
</html>

🛠 이 코드의 DOM 트리

Document
 └── html
     ├── head
     │   └── title ("DOM 예제")
     └── body
         └── div#container
             ├── h1 ("Hello")
             ├── p.desc ("DOM을 배우자!")
             └── ul
                 ├── li ("아이템 1")
                 └── li ("아이템 2")

각 요소가 부모-자식 관계를 가지며, DOM 트리 형태로 연결됨.

4️⃣ DOM 자유롭게 조작하기

이제 DOM을 동적으로 변경하는 방법을 알아보자.

✅ 1) 요소 선택

const title = document.querySelector("h1");   // 첫 번째 <h1> 선택
const paragraph = document.querySelector(".desc");  // class="desc" 선택
const listItems = document.querySelectorAll("ul li");  // 모든 <li> 선택

✅ 2) 내용 변경

title.textContent = "안녕하세요!";  // 텍스트 변경
paragraph.innerHTML = "<strong>DOM 조작 중!</strong>";  // HTML 변경

✅ 3) 새로운 요소 추가

const newItem = document.createElement("li");  // <li> 요소 생성
newItem.textContent = "아이템 3";  // 내용 추가
document.querySelector("ul").appendChild(newItem);  // <ul>에 추가

✅ 4) 요소 삭제

const firstItem = document.querySelector("ul li");  // 첫 번째 <li> 선택
firstItem.remove();  // 삭제

✅ 5) 이벤트 추가

title.addEventListener("click", () => {
    alert("제목이 클릭되었습니다!");
});

5️⃣ DOM을 완벽하게 활용하기 위한 깊은 이해

DOM을 완전히 이해하고 자유롭게 사용하려면 다음 개념을 익혀야 해.

📌 1) 부모-자식-형제 관계

element.parentElement → 부모 요소 찾기
element.children → 자식 요소 찾기
element.nextElementSibling → 다음 형제 요소
element.previousElementSibling → 이전 형제 요소

const list = document.querySelector("ul");
console.log(list.parentElement);  // div#container
console.log(list.children);  // li 요소들
console.log(list.firstElementChild.textContent);  // "아이템 1"

📌 2) DOM 성능 최적화

DOM 조작이 많아지면 성능 저하가 발생할 수 있어. 이를 방지하려면:

✅ 문서 조각(DocumentFragment) 사용

const fragment = document.createDocumentFragment();
for (let i = 1; i <= 3; i++) {
    let li = document.createElement("li");
    li.textContent = `아이템 ${i}`;
    fragment.appendChild(li);
}
document.querySelector("ul").appendChild(fragment);

➡ DOM을 직접 조작하는 횟수를 줄여 성능 개선 가능!

✅ 클래스 변경 시 classList 활용

const box = document.querySelector("#container");
box.classList.add("active");  // 클래스 추가
box.classList.remove("hidden");  // 클래스 제거
box.classList.toggle("dark-mode");  // 클래스 토글

🎯 최종 정리

DOM은 HTML을 객체 모델로 표현한 트리 구조야.
document.querySelector() 등으로 요소를 선택해 조작할 수 있어.
textContent, innerHTML로 내용을 변경할 수 있어.
createElement(), appendChild()로 동적 요소 추가 가능.
remove()로 요소 삭제 가능.
이벤트를 추가해 사용자 상호작용을 구현할 수 있어.
성능 최적화를 위해 문서 조각(DocumentFragment) 을 활용하면 좋아.

이제 DOM을 자유롭게 다룰 준비가 됐어! 🚀
추가로 실습할 예제나 더 알고 싶은 내용이 있으면 질문해줘! 😊

HTML 문서는 계층적인 구조를 가지며, 상위 요소(부모)와 하위 요소(자식)로 이루어진 트리 구조(DOM Tree)를 형성해. 아래 예제를 통해 각각의 요소가 어떻게 계층적으로 연결되는지 확인해보자.

📌 HTML 기본 구조

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>DOM 구조</title>
  </head>
  <body>
    <div id="container">
      <h1>제목</h1>
      <p>설명입니다.</p>
      <ul>
        <li>항목 1</li>
        <li>항목 2</li>
        <li>항목 3</li>
      </ul>
    </div>
  </body>
</html>

🔍 DOM 트리 구조

위 HTML의 DOM 트리는 다음과 같이 표현할 수 있어.

Document
 └── html
     ├── head
     │   ├── meta
     │   └── title ("DOM 구조")
     └── body
         └── div#container
             ├── h1 ("제목")
             ├── p ("설명입니다.")
             └── ul
                 ├── li ("항목 1")
                 ├── li ("항목 2")
                 └── li ("항목 3")

🌱 각 태그의 부모-자식 관계

태그	부모	자식
`<html>`	`Document`	`<head>`, `<body>`
`<head>`	`<html>`	`<meta>`, `<title>`
`<body>`	`<html>`	`<div id="container">`
`<div>`	`<body>`	`<h1>`, `<p>`, `<ul>`
`<ul>`	`<div>`	`<li>`, `<li>`, `<li>`
`<li>`	`<ul>`	없음

이렇게 모든 요소는 부모-자식 관계를 가지며, 형제 요소들도 존재해.

✨ 중요한 개념

부모 요소 (Parent Element)
- 특정 요소를 감싸고 있는 요소.
- 예: <body>는 <div>의 부모.
자식 요소 (Child Element)
- 부모 요소 안에 포함된 요소들.
- 예: <ul>의 자식은 <li>들.
형제 요소 (Sibling Element)
- 같은 부모를 공유하는 요소들.
- 예: <h1>과 <p>, <ul>은 모두 <div>의 자식이므로 형제 관계.

💡 자바스크립트로 요소 접근하기

이 계층 구조를 이해하면, 자바스크립트에서 특정 요소를 쉽게 찾고 조작할 수 있어.

// 특정 요소 가져오기
const container = document.getElementById("container"); // div#container 선택
const title = container.querySelector("h1"); // div 내부의 h1 선택
const listItems = document.querySelectorAll("ul li"); // 모든 li 선택

// 부모 요소 찾기
console.log(title.parentElement); // div#container

// 자식 요소 찾기
console.log(container.children); // h1, p, ul 목록 반환

// 형제 요소 찾기
console.log(title.nextElementSibling); // <p> 요소
console.log(title.previousElementSibling); // null (이전 형제가 없음)

🚀 정리

HTML 요소들은 부모-자식-형제 관계를 가진다.
<html> → <head> & <body> 구조로 나뉜다.
<div> 같은 컨테이너 안에 여러 요소를 포함할 수 있다.
DOM 트리를 이해하면 자바스크립트로 효율적으로 웹 페이지를 조작할 수 있다.

✅ DOM과 태그의 상관관계

DOM (Document Object Model) 은 HTML 문서를 프로그래밍적으로 조작할 수 있도록 구조화한 객체 모델이야.
즉, HTML 태그(Tag)들을 JavaScript에서 조작할 수 있도록 표현한 트리(Tree) 구조라고 보면 돼.

✅ 1️⃣ DOM과 HTML 태그의 관계

HTML 문서가 로드되면 브라우저는 DOM을 생성함.
예를 들어, 아래 HTML 문서를 보자.

<!DOCTYPE html>
<html>
<head>
    <title>My Page</title>
</head>
<body>
    <h1>Hello, DOM!</h1>
    <p>이것은 문단입니다.</p>
</body>
</html>

이 HTML 문서가 로드되면 브라우저는 다음과 같은 DOM 트리 구조를 생성함.

Document
 ├── <html>
 │    ├── <head>
 │    │    ├── <title>My Page</title>
 │    ├── <body>
 │         ├── <h1>Hello, DOM!</h1>
 │         ├── <p>이것은 문단입니다.</p>

✔ DOM에서는 HTML 태그를 "노드(Node)"라고 부름
✔ DOM을 사용하면 HTML 태그를 JavaScript로 선택하고 변경 가능

✅ 2️⃣ DOM을 사용한 태그 조작

JavaScript를 사용하면 DOM을 통해 HTML 태그를 동적으로 변경할 수 있음.

📌 HTML 요소 선택 및 변경

<h1 id="title">안녕하세요!</h1>
<button onclick="changeTitle()">제목 변경</button>

<script>
    function changeTitle() {
        let title = document.getElementById("title"); // 태그 선택
        title.innerText = "DOM을 배워봅시다!"; // 태그 내용 변경
    }
</script>

✔ document.getElementById("title") → <h1> 태그를 선택
✔ innerText를 변경하여 HTML 내용을 바꿈

✅ 3️⃣ DOM과 태그의 주요 개념

개념	설명	예제
요소(Element)	HTML 태그 자체	`<p>문장</p>`
노드(Node)	태그, 속성, 텍스트 등을 포함하는 DOM의 기본 단위	`<h1>`, `textNode("Hello")`
트리 구조(Tree)	부모-자식 관계로 HTML 문서를 표현	`<html>` → `<body>` → `<p>`
DOM 조작	JavaScript로 태그 수정	`document.getElementById("title").innerText = "변경됨"`

✅ 4️⃣ DOM과 태그의 상관관계 정리

✔ DOM은 HTML 태그를 객체 형태로 표현하는 구조
✔ HTML 태그가 곧 DOM의 요소(Element)
✔ JavaScript를 사용해 DOM을 조작하면 HTML 태그를 동적으로 변경 가능
✔ HTML → DOM 트리 → JavaScript로 제어하는 방식으로 웹이 동작

🚀 즉, HTML 태그는 DOM의 일부이며, DOM을 사용하면 HTML을 자유롭게 조작할 수 있어!

'웹 개발' 카테고리의 다른 글

JSP 스코프 (0)	2025.02.09
HTTP (0)	2025.02.09
파라미터란? (0)	2025.02.08
보안 차원에서 주소(URL)의 파라미터를 가리는 이유와 방법 (0)	2025.02.08
절대 경로와 상대 경로 (0)	2025.02.07

현재글HTML 구조이해1 - DOM(Document Object Model)이란?

Bluebull웹개발

useState, 상속, state, 객체, 메서드, 자바기초, 자바문법, props, Get, JSON, 웹개발, 자바, useEffect, axios, javascript, springboot, Post, Java, 객체지향, React,

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

Bluebull웹개발