HTML 문서가 표현되는 방법, DOM의 개념

2019. 9. 22. 20:33

지금까지 html로 웹 페이지의 구조를 만들고, css로 웹 페이지를 꾸며 정적인 웹 페이지를 만드는 법을 익혔습니다.

그리고 javascript의 기본적인 문법을 공부해 간단한 프로그램을 만들 수 있게 되었습니다.

html로 만든 웹 페이지는 링크, 사진, 버튼, 입력창 등등 다양한 요소로 구성되어 있습니다.

그동안 만들었던 정적인 웹에서 이 각각의 요소들은 처음 로딩된 이후로 특별한 변화를 일으키지 않습니다.

하지만 우리가 흔히 접할 수 있는 실제 웹 페이지에서는 버튼을 눌러 글을 삭제하거나, 체크박스로 옵션을 선택하거나, 마우스를 올렸을 때 이미지가 변화하는 등 다양한 상호작용이 발생합니다.

javascript로 웹 페이지를 동적으로 제어하려면 어떻게 해야할까요?

이번 글에서는 html 문서가 내부적으로 어떻게 표현되어 있는지 그 구조를 간단하게 정리해보려 합니다.

프로그래밍을 처음 해본다면 '계층적인 구조'의 개념이 낯설 수 있습니다.

성신여대의 학과 구조를 예시로 들어볼게요.

계층 구조가 무엇인지 짐작이 가나요? 성신여대라는 최상위 요소(element)의 하위 요소로 돈암수정대학과 미아운정그린대학이 들어갑니다.

돈암수정대학의 하위 요소로 다시 인문과학대학이 들어갑니다. 사학과는 인문과학대학에 대해 하위 계층에 존재하고, 인문과학대학은 사학과에 대해 상위 계층에 존재합니다.

이렇게 가계도처럼 계층을 나타낸 구조를 트리(Tree)라고 합니다. 트리에 있는 요소 하나하나를 노드(Node)라고 합니다.

DOM(Document Object Model)은 HTML 문서의 계층적인 구조를 트리로 나타낸 것입니다.

아래와 같은 html 문서를 예로 들어보겠습니다. 웹 페이지가 로딩되면, 브라우저는 DOM을 생성합니다.

<!DOCTYPE html>
<html>
<head>
    <title>My title</title>
</head>
<body>
    <a href="">My link</a>
    <h1>My header</h1>
</body>
</html>

이렇게 노드로 표현되는 하나하나의 요소는 자바스크립트의 '객체(Object)'와 같은 역할을 합니다.

자바스크립트는 HTML 문서와 웹 브라우저를 객체로 간주하여 처리합니다.

브라우저에 있는 모든 요소는 객체로 표현되어 있기 때문에 자바스크립트에서 객체의 속성을 변경하고 객체의 메서드를 호출함으로써 웹 브라우저를 제어할 수 있게 됩니다.

즉, JavaScript로 모든 HTML, CSS의 요소(element)와 속성(attribute)을 변경, 추가, 삭제할 수 있다는 이야기 입니다.

참고 링크

이 내용에 대해서 당장은 정확하게 이해하지 못하더라도 괜찮습니다.

Just in case