쯔이's Dev

DOM( Document Object Model)(1) 정의 본문

카테고리 없음

DOM( Document Object Model)(1) 정의

jjhim531 2025. 1. 4. 22:39
반응형

브라우저가 HTML, XML 문서를 객체로 표현한 구조를 말한다.
웹 페이지의 콘텐츠를 **트리 구조(Tree Structure)**로 표현하며, 이를 통해 JavaScript로 문서를 쉽게 조작하거나 탐색할 수 있다

1. DOM의 구성 요소

  • DOM은 크게 세 가지 주요 구성 요소로 나뉩니다:
    • 노드(Node):
      • DOM 트리의 기본 단위. HTML 요소, 속성, 텍스트 등이 모두 노드로 표현됩니다.
    • 요소(Element):
      • 태그(<div>, <p> 등)로 구성된 노드.
    • 속성(Attribute):
      • 요소의 추가 정보를 나타내는 노드(예: id="header", class="box" 등).
    • 텍스트(Text):
      • 요소의 내용으로, 노드로 표현됩니다.

DOM의 주요 개념

  1. HTML 문서 → DOM 트리로 변환
    • 브라우저는 HTML 파일을 읽고 해석해서 DOM 트리라는 구조를 생성한다.
    • DOM 트리는 HTML 문서의 각 요소, 속성, 텍스트 등을 노드(Node)로 나타내는 트리 구조이다.

.

<!DOCTYPE html>
<html>
  <head>
    <title>Example</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is a paragraph.</p>
  </body>
</html>
html
├── head
│   └── title
│       └── "Example"
└── body
    ├── h1
    │   └── "Hello, World!"
    └── p
        └── "This is a paragraph."

 

2. DOM은 프로그래밍 인터페이스

  • DOM은 JavaScript 같은 프로그래밍 언어로 문서를 조작할 수 있도록 제공되는 인터페이스야.
  • JavaScript로 DOM을 사용하면 HTML 요소를 추가, 삭제, 수정, 탐색할 수 있어.

 

DOM과 JavaScript의 관계

  • HTML → DOM: 브라우저는 HTML을 DOM 트리로 변환.
  • DOM → JavaScript: JavaScript는 DOM을 사용해서 HTML 문서를 읽고 변경.

DOM을 왜 배우는 걸까?

  1. 웹 페이지 동적 조작:
    • HTML/CSS로 만든 정적인 웹 페이지를 JavaScript로 동적으로 변경하기 위해.
  2. 사용자 경험 개선:
    • 클릭, 입력 같은 사용자 상호작용을 처리하고 반응하기 위해.
  3. 브라우저 API 이해:
    • DOM은 브라우저와 JavaScript가 소통하는 중요한 다리 역할을 해.

결론

DOM은 HTML 문서를 트리 형태로 표현한 객체 모델이고, JavaScript를 사용해 DOM을 조작하면 웹 페이지를 동적으로 변경할 수 있어.

기타 유용한 DOM 관련 메서드

메서드설명

createElement() 새로운 HTML 요소 생성
createTextNode() 텍스트 노드 생성
appendChild() 부모 요소의 마지막 자식으로 추가
insertBefore() 특정 요소 앞에 새 요소 삽입
removeChild() 특정 자식 요소 제거
replaceChild() 특정 자식 요소를 새 요소로 교체 
const ul = document.createElement('ul'); // 목록 생성
const li = document.createElement('li'); // 목록 항목 생성
li.textContent = "새 항목 추가"; // 텍스트 추가
ul.appendChild(li); // 목록에 항목 추가
document.body.appendChild(ul); // 문서에 목록 추가
728x90
반응형