DOM이란

정연희·2021년 9월 11일
0

HTML

목록 보기
1/2
post-thumbnail

DOM이란?

문서 객체 모델(The Document Object Model, 이하 DOM)은 HTML, XML 문서의 프로그래밍 interface 이다.
출처: https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction

DOM은 1) 단순 텍스트로 이루어진 HTML 문서를 객체 모델로 나타내어, 2)객체 지향 프로그래밍이 객체 모델(웹 페이지)을 접근, 즉 문서 구조, 스타일, 내용 등을 변경할 수 있게 하는 프로그래밍 애플리케이션입니다. DOM이 무엇인지 더욱 구체적으로 설명하기 위해서 위에서 표시한 것과 같이 1, 2번으로 나누어 설명하겠습니다.

1) DOM은 웹 페이지의 객체 지향 표현입니다.
DOM은 주어진 HTML 코드를 바탕으로 객체 모델(웹 페이지의 객체 지향 표현)로 나타내는데 그 객체 모델은 "노드 트리"로 표현됩니다. 아래 예시에서 보면 다음과 같은 HTML 문서를 한 나무 줄기(부모 줄기)가 여러 자식 나뭇가지를 가지고 그 자식 나뭇가지는 여러 나뭇잎을 가진 듯한 모습의 "노드 트리" 구조로 나타냅니다.

여기서 html은 부모 줄기, 아래 태그들은 자식 나뭇가지, "My first web page"와 같은 내용은 나뭇잎에 해당된다고 생각하시면 됩니다. 객체 모델이 이와 같이 표현된다는 점에서 "문서 객체 모델"이라는 이름이 유래되었습니다. 위 객체 모델의 각 노드들은 그저 문서의 구조의 일부분이 아니라 각각의 기능과 정체성을 갖는 객체이며, DOM은 바로 이런 객체들을 한 객체 모델로 포현한 것입니다. DOM은 문서의 여러 객체들(elements)에 대한 모델이고, 이 모델은 문서 구조뿐만 아니라 문서를 구성하는 객체들의 정체성과 행동(behavior)을 정의하기 때문에 "문서 객체 모델"이라는 이름을 가지게 된 것입니다.

이때, DOM은 웹 페이지의 객체 지향 표현이지만 이 객체 모델을 조작할 수 있도록 하는 interface이기도 합니다. 인터페이스 의미의 DOM은 2번에 자주 사용되는데 1번에서의 DOM과 헷갈리지 않길 바랍니다.

<주의할 점>
이때, DOM이 다르게 표현된 것일 뿐 HTML 문서로부터 생성된 것이기 때문에 거의 비슷한 것이며 내용이 동일하다고 착각할 수 있습니다. 하지만 DOM과 HTML 내용이 다를 수 있습니다.

  • HTML 문서가 유효하지 않을 경우
    DOM은 유효한 HTML 문서의 인터페이스이기 때문에 DOM을 생성하는 동안 브라우저는 유효하지 않은 HTML 코드를 교정합니다. 가령,
<!doctype html>
<html>
Hello world
</html>

같은 HTML 문서가 있다고 했을 때, 유효한 HTML 문서의 필수 요소인 <head>와 <body>가 빠져있다는 것을 확인할 수 있습니다. 하지만 생성된 DOM에는 이 두 필수 요소들이 올바르게 함께 표현됩니다.

  • 프로그래밍 언어에 의해 DOM이 수정될 때
    뒤에서 더욱 자세히 얘기하겠지만 DOM은 인터페이스의 일종이기 때문에 다른 프로그래밍 언어로 인해 수정될 수 있습니다. 가령, 
function addToList(){
    var listContainer = document.getElementById('listSection');
    var newListElement = document.createElement("div");
    var inputBox= document.getElementById('addText');
    var inputBoxText = inputBox.value;
  newListElement.setAttribute("class", "listElement");
    newListElement.innerHTML="\
        <img src='./pinkCircleIcon.png'>\
        <button class='textButton' name='undone' type='button' value='' onclick='doneOrUndone(this);'></button>\
        <button class='removeButton' type='button' onclick='removeFromList(this);'></button>";
    newListElement.children[1].textContent= inputBoxText;
    listContainer.appendChild(newListElement);
    inputBox.value="";
}

자바스크립트로 다음과 같은 코드를 작성하면 HTML 문서 내용은 변경되지 않지만 DOM은 수정됩니다.

2) DOM은 웹 페이지(일종의 문서, document)를 표현, 저장, 조작하는 방법을 제공합니다.
DOM은 객체 지향 언어가 객체 모델(웹 페이지)을 접근할 수 있도록, 즉 문서 구조, 스타일, 내용 등을 변경할 수 있도록 하는 프로그래밍 인터페이스입니다. 주로 javascript을 이용해 DOM을 조작하지만 python와 같은 다른 객체 지향 언어로도 접근 가능합니다. 위 자바스크립트가 이런 DOM interface를 사용한 예시입니다.

DOM interface 사용 방법은 W3C DOM, WHATWG DOM과 같은 표준에 정의되어 있는데, DOM 표준 규약 외에도 다양한 라이브러리 또는 프레임워크를 통해 DOM을 접근 및 조작할 수 있습니다.

<Vanilla javascript란?>
바닐라 javascript는 DOM을 접근할 수 있는 여러 프레임워크 및 라이브러리 사용하지 않고 순수히 javascript(ECMAScript)를 이용해 코드를 작성하는 방법을 가리킵니다. 즉, AngularJS, ReAct, Vue.js, jQuery와 같은 프레임워크/라이브러를 사용하지 않는 것입니다. 그러기 위해서는 ECMAScript의 기본과 DOM, BOM의 구성요소에 대해서 잘 알고 있어야 합니다.
출처: http://www.phpinfo.co.kr/index.php/2018/09/24/jsvanilla-js/

참고문헌

profile
정연희
다음 포스트

HTML 시작하기 앞서

0개의 댓글