DOM(Document Object Model)

HTML / JAVASCRIPT

자바스크립트는 HTML 조작에 특화된 언어입니다. 그런데 HTML과 자바스크립트는 다른 언어입니다.

 

어떻게 자바스크립트는 HTML 태그들을 알아보고 조작할 수 있는 걸까요?

자바스크립트가 HTML 조작을 하기 위해선 HTML을 자바스크립트가 해석할 수 있는 문법으로 변환해놓으면 됩니다.

HTML을 자바스크립트가 좋아하는 array 혹은 object 자료형에 담아버리는게 좋지 않을까요?

그래서 실제로 브라우저는 HTML 페이지를 열어줄 때 HTML을 자바스크립트로 쉽게 찾고 바꾸기 위해 object와 비슷한 자료형에 담아줍니다. 

 

예로,

<div style="color : red">DOM에 대해 설명해봅시다</div>

 

브라우저는 이런 HTML을 발견하면 object 자료로 바꿔서 보관해둡니다.

구체적으로는 var document = { } 이런 변수를 하나 만들어서 거기 넣어줍니다.

 

그래서

var document = {
  div1 : {
    style : {color : 'red'}
    innerHTML : 'DOM에 대해 설명해봅시다'
  }
}

이런식으로 object 자료에 정리를 해놓게 됩니다.

 

그래서 DOM이란?

위 변수를 document object라고 부릅니다. 여기에 model을 붙여서 Document Object Model이라고 합니다.

요약하자면, 자바스크립트가 HTML에 대한 정보들 (id, class, name, style, innerHTML 등)을 object 자료로 정리한걸 DOM이라고 부릅니다. 

 

DOM(Document Object Model)은 웹 페이지에 대한 인터페이스입니다.

기본적으로 여러 프로그램들이 페이지의 콘텐츠 및 구조, 그리고 스타일을 읽고 조작할 수 있도록하는 API를 제공합니다.

그래서 DOM을 보게 되면 웹 브라우저가 html 페이지를 인식하는 방식을 이야기 하거나 문서 객체(document object)와 관련된 객체의 집합에 관한 이야기라는 것을 쉽게 추측할 수 있습니다.

 

 

그래서, 우리가 JavaScript로 구현한 모든 동작들이 대체로 DOM을 수정하기 위한 것이었으며, JavaScript는 브라우저가 읽고 어떤 작업을 할 수 있는 언어인데 DOM은 바로 이 작업이 이루어지는 장소 중 하나인 것으로 이해하면 됩니다.