티스토리 뷰
문서 객체 모델(DOM)
자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법을 '문서 객체 모델(Document Object Model)'이라고 한다.
웹에서 자바스크립트를 사용하는 이유는 어떤 조건에 맞거나, 사용자의 동작이 있을 때 웹 문서 전체 또는 일부분이 동적으로 반응하게 하기 위해서이다. 그러기 위해선 웹 문서의 모든 요소를 따로 제어할 수 있어야 한다.
자바스크립트는 웹 문서와 그 안에서 사용한 모든 요소를 각각 다른 객체로 인지하여 처리한다.
웹 문서 전체는 document 객체이고 삽입한 이미지는 image 객체이다.
DOM 트리
DOM은 웹 문서의 요소들을 부모, 자식, 형제 요소로 나누어 구분한다.
아래의 코드는 기본적인 HTML 구조이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>hello, world!</h1>
</body>
</html>
html 요소는 head, body의 부모 요소이고, head, body는 html의 자식 요소이다.
다시 body 요소는 h1 의 부모 요소이고 h1은 body의 자식 요소이다.
긱 HTML 요소들의 계층 관계를 그림으로 나타내면 아래와 같다.
DOM은 문서 안의 요소뿐만 아니라 각 요소에서 사용한 내용과 속성도 자식으로 나타낸다.
이렇게 부모와 자식 구조로 표시하면 마치 나무 형태가 되므로 DOM 트리라고 한다.
DOM 트리에서 가지가 갈라져 나간 항목을 노드(node)라고 하며, DOM 트리의 시작 부분인 html 노드를 나무 뿌리에 해당한다 해서 루트(root) 노드라고 한다. 루트 노드를 시작으로 웹 문서에서 사용한 요소는 계층 구조를 이룬다.
모든 HTML 태그는 요소(element) 노드이다.
HTML 태그에서 사용하는 텍스트 내용은 자식 노드인 텍스트(text) 노드이고 속성은 자식 노드인 속성(attribute) 노드이다.
주석의 경우 주석(comment) 노드이다.
각 노드 사이의 관게를 부모와 자식, 형제 간으로 표현할 수 있고 부모(Parent) 노드에는 자식(child) 노드가 있으며, 부모 노드가 같은 형제(sibling) 노드도 있다.
이렇게 웹 문서를 해석할 DOM 구조를 잘 만들어야 자바스크립트를 사용해서 객체에 접근해 원하는 부분을 수정할 수 있다.
그리고 HTML 소스를 코딩할 때에도 들여쓰기를 잘 해야 소스만 봐도 HTML DOM의 계층 구조를 머릿속으로 그릴 수 있다.
'Development' 카테고리의 다른 글
| 크롬 확장 프로그램 충돌로 인한 레이아웃 깨짐 문제 해결 (0) | 2024.01.09 |
|---|---|
| 웹 요소의 속성을 가져오거나 수정하는 방법 (1) | 2023.12.27 |
| 웹 요소의 내용을 수정하는 방법 (0) | 2023.12.26 |
| DOM에 접근하는 다양한 방법 (2) | 2023.12.26 |
| 새 브라우저 창을 여는 window.open() 메서드 (1) | 2023.12.18 |