7-1 문서 객체 모델(DOM)

JavaScript

7-1 문서 객체 모델(DOM)

리버윤 2023. 9. 15. 12:00

728x90

문서 객체 모델(Document Object Model)이란?

: 웹 문서의 모든 요소를 자바스크립트를 이용하여 조작할 수 있도록 객체를 사용해 문서를 해석하는 방법.

DOM을 이해하는 가장 간단한 방법은 html 문서를 트리 구조로 생각하는 것이다.

이것을 DOM 트리(tree)라고 부른다.

예를 들어

<!DOCTYPE html>
<html>
  <head>
    <title>My Web Page</title>
  </head>
  <body>
    <h1>Welcome to My Web Page</h1>
    <p>This is a paragraph.</p>
    <div id="container">
      <button>Click me!</button>
    </div>
  </body>
</html>

위와 같은 html문서가 있을 때

아래와 같은 트리 구조로 표현된다.

html
├── head
│   └── title: "My Web Page"
└── body
    ├── h1: "Welcome to My Web Page"
    ├── p: "This is a paragraph."
    └── div (id="container")
        └── button: "Click me!"

이렇게 각 html 태그는 DOM의 노드(Node)에 해당하며, 부모-자식 관계를 형성한다.

728x90