DOM이란 무엇인가?

https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction

Introduction to the DOM - Web APIs | MDN

---

DOM이란 무엇인가?

DOM(Document Object Model)은 웹페이지를 표현하는 데이터 표현 방법이며,

web document를 위한 프로그래밍 인터페이스라고도 생각할 수 있다.

 

웹 자체가 문서(논문 등)를 공유하기 위한 방법론에서 시작했다고 한다.

따라서 웹의 기반은 문서(document)이다.

그리고 문서는 정적이다. (변하지 않는다.)

 

하지만 우리는 DOM을 통해 우리는 document의 구조를 변경할 수도, 스타일을 바꿀수도, 컨텐츠를 변경해줄 수도 있다.

문서(document)를 노드 및 객체로 표현한 것을 DOM이라고 하는데,

우리는 프로그래밍 언어를 통해 객체를 컨트롤 할 수 있다.

따라서 DOM 객체(Node)를 제어함으로써 웹페이지라는 정적인 문서를 동적으로 컨트롤할 수 있게 된다.

 

 

아래 코드를 통해 DOM을 선택하고, 내용을 컨트롤해보자.

    <h1 class="hello">heading 1입니다.</h1>
    <p class="hello">paragraph 입니다.</p>
    <h2 class="hello">heading 2입니다.</h2>
    <script>
        const h1node = document.querySelector("h1");
        const pickDOM = document.querySelectorAll(".hello");
        h1node.innerText = "저는 동적으로 바뀌었습니다."
        console.log((pickDOM[0].nodeName));
        console.log((pickDOM[1].nodeName));
        console.log((pickDOM[2].nodeName));
    </script>

DOM을 통해 조작한 document

• querySelector와 querySelectorAll이라는 DOM 메서드를 통해
• 문서의 Node를 캐치해냈으며,
• 그 중 h1은 DOM 프로퍼티를 이용해 컨텐츠 요소를 바꿀 수 있었다.

 

웹 페이지를 만들고, 변경할 수 있는 모든 프로퍼티와 메서드, 사용가능한 이벤트들은 모두 객체형식으로 구성되어 있다.

따라서 웹 개발자는 DOM을 반드시 이해해야만 한다.