-
[JS/DOM] 자바스크립트, 문서 객체 모델(Document Object Model)에 대하여Frontend 2019. 6. 3. 12:33
문서 객체 모델은 영어로 "Document Object Model"이라고 하고 줄여서 DOM(돔)이라고 부른다.
DOM이란 웹 문서의 모든 요소를 자바스크립트를 이용하여 조작할 수 있도록 객체를 사용하여 문서를 해석하는 방법을 말한다.
이게 무슨 말인가 하면 우리가 텍스트 에디터로 웹 문서를 작성하여 브라우저로 실행시키면 이 웹 문서를 브라우저가 이해할 수 있는 구조로 메모리에 적재해야 한다. 즉, 웹 문서의 모든 Element와 Attribute, Text들을 브라우저가 이해할 수 있도록 각각 객체로 만들고 이 객체들의 관계를 트리 구조로 구성한 것이 DOM이다. 웹 문서 자체를 가리키는 DOM 요소 중 하나인 document를 한 번 콘솔 창에 입력해보자.
콘솔에 출력되는 값을 펼쳐보면 웹 문서의 구조가 그대로 들어 있다. 이 것이 바로 DOM이고, 우리는 이 DOM을 이용하여 웹 문서를 언제든지 동적으로 변경할 수 있다.
DOM의 트리 구조
DOM은 웹 문서의 요소를 부모 요소와 자식 요소로 구분하여 계층적 구조로 인식한다. 만약에 우리가 다음과 같은 간단한 웹 문서를 만들었다고 해보자.
<!DOCTYPE html> <html> <head> <title>DOM이란?</title> </head> <body> <h1 class="title">제목</h1> <p class="content">본문 영역입니다.</p> </body> </html>이 웹문서를 렌더링하면 DOM은 body를 h1과 p의 부모 요소로 인식하고, h1과 p는 body의 자식 요소로 인식한다. 이 것을 그림으로 표현하면 다음과 같다.
DOM의 트리구조는 이렇게 노드와 가지로 표현한다. 네모 상자가 노드이고 노드와 노드 사이를 연결하여 관계를 표시하고 있는 선이 가지이다. 위 그림에서 확인할 수 있듯이 노드는 웹 문서의 HTML 태그 요소만 표현하는 것이 아니다. 모든 텍스트와 이미지, 태그의 속성들까지 객체화하여 DOM트리에 표현한다.
문서 노드 (Document Node)
트리의 최상위에 존재하며, 하위 자식 노드에 접근하기 위해선 Document Node를 통해야만 한다. Dom 트리에 접근하기 위한 시작점이다.
요소 노드 (Element Node)
웹 문서의 태그는 Element Node로 표현된다. 모든 Element Node는 Attribute Node와 Text Node를 자식으로 가질 수 있는 데, 이 자식 노드들을 변경하여 웹 페이지를 동적으로 조작할 수 있다.
속성 노드 (Attribute Node)
태그의 모든 속성은 Attribute Node로 표현하며 해당 태그의 자식 노드로 인식된다.
텍스트 노드 (Text Node)
태그가 가지고 있는 텍스트는 해당 Element Node의 자식 노드인 Text Node로 표현된다. Text Node는 Dom 트리의 가장 아래쪽에 위치하여 자신의 자식 노드는 가질 수 없다.
주석 노드 (Comment Node)
주석은 Comment Node로 표현한다.
크롬에서 개발자 도구를 활용하면 문서의 DOM 트리 구조와 요소들의 속성을 쉽게 파악할 수 있다.
여기서 우리가 주의해야할 점은 DOM은 자바스크립트가 아니라는 점이다. DOM은 웹 문서에서만 존재하는 것이고, 브라우저가 자바스크립트를 이용해서 웹 페이지를 조작할 수 있도록 제공해주는 하나의 요소일 뿐이다. 그러므로 우리가 자바스크립트로 DOM을 조작하는 것은 HTML 웹 문서 자체를 수정하는 것이 아니고 DOM을 조작하는 것일 뿐이다.
반응형'Frontend' 카테고리의 다른 글
[JS/Array] slice()와 splice()의 차이점 (2045) 2019.06.07 [JS/Recursion] 자바스크립트, 재귀함수에 대하여 (Recursion) (2168) 2019.06.05 [JS] 자바스크립트, 생성자함수(Constructor function)와 프로토타입 체인(Prototype chain) (1) 2019.05.31 [JS/Slider] 바닐라 자바스크립트로 무한 루프 슬라이드(Carousel) 구현하기 (20) 2019.05.31 [JS/this] 자바스크립트, this의 4가지 역할 (5) 2019.05.30 COMMENT