문서 객체 모델(DOM)

📁Web Developing/JavaScript 기초

문서 객체 모델(DOM)

Hush 2022. 6. 23. 17:10

자바스크립트를 공부하다 보면 DOM이란 말을 자주 만날 것이다.

DOM은 문서 객체 모델(document object model)의 줄임말이다.

문서 객체 모델은 자바스크립트 프로그래밍에서 매우 중요한 개념이니 잘 이해하고 넘어가야 한다.

문서 객체 모델이란

우리는 웹 문서의 모든 요소를 따로 제어할 수 있어야 한다.

예를 들어 웹 문서에 텍스트와 이미지가 들어 있다면 웹 브라우저는 마크업 정보를 보면서 텍스트 단락이 몇 개이고 그 내용이 뭉서인지 살펴본다.

또한 이미지가 몇 개이고 이미지 파일 경로는 어떠한지 대체 텍스트는 무엇인지도 파악해서 이미지별로 정리해서 인식한다.

그리고 이러한 텍스트와 이미지 요소를 브라우저가 제어하려면 두 요소를 따로 구별하여 인식해야 한다.

이보다 더 많은 요소를 사용한 웹 문서라면 요소 사이의 포함 관계도 알아야 한다.

이러한 모든 정보 요소를 자바스크립트로 가져와 프로그래밍할 때 사용한다.

이때 알아야 할 개념이 있는데 바로 DOM이다.

다음은 문서 객체 모델을 정의한 것이다

문서 객체 모델의 정의
자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법

HTML 언어로 작성한 웹 문서의 DOM을 HTML DOM이라고 하며, XML 문서에서 사용하는 XML DOM도 있다.

여기서는 HTML DOM을 기준으로 설명한다.

DOM은 웹 문서를 하나의 객체로 정의한다.

그리고 웹 문서를 이루는 텍스트나 이미지, 표 등의 모든 요소도 각각 객체로 정의한다.

예를 들어 웹 문서 전체는 document 객체이고, 삽입한 이미지는 image 객체이다.

이처럼 DOM은 웹 문서와 그 안의 모든 요소를 '객체'로 인식하고 처리한다.

앞에서 배웠던 브라우저 객체와 마찬가지로 웹 문서 객체도 다양한 프로퍼티와 메서드가 있다.

우선 문서 객체 모델의 구졸르 나타내는 DOM 트리를 알아보겠다.

DOM 트리

자바스크립트로 DOM을 조작하려면 실제 웹 문서가 DOM으로 어떻게 표현되는지 알아야 한다.

DOM은 웹 문서의 요소를 부모 요소와 자식 요소로 구분한다.

예를 들어 다음과 같은 간단한 소스를 생각해 보자.

<!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>Do it!</h1>
    <img src="images/EiffleTower.jpg" alt="Eiffle Tower">
</body>
</html>

다음 그림은 위 코드의 부모자식 관계를 정리한 것이다.

DOM의 관점은 여기서 한 단계 더 발전하는데, DOM 은 문서 안의 요소뿐만 아니라 각 요소에서 사용한 내용과 속성도 자식으로 나타낸다.

이렇게 부모와 자식 구조로 표시하면 마치 나무 형태가 되므로 DOM 트리라고 한다.

DOM 트리에서 가지가 갈라져 나간 항목을 node라고 하며, DOM 트리의 시작 부분인 html 노드를 root node라고 한다.

DOM을 구성하는 기본 원칙은 다음과 같다.

1. 모든 HTML 태그는 요소(element) 노드이다.
2. HTML 태그에서 사용하는 텍스트 내용은 자식 노드인 텍스트 노드이다.
3. HTML 태그에 있는 속성은 자식 노드인 속성(attribute) 노드이다.
4. 주석은 주석(comment) 노드이다.

저작자표시 (새창열림)