Document Object Model(DOM)이란 무엇인가


  • Javascript의 DOM에 대해서 공부하고 정리한 내용입니다.

DOM (Document Object Model)

  • 우리가 웹 페이지를 만드면 html 파일을 브라우저에서 읽게되고 브라우저는 body, section, img 태그 등 각각의 태그들을 분석해서 노드(Node)라는 오브젝트로 변환하게 된다

  • 노드는 여러가지 DOM 타입들이 상속하는 인터페이스 이며 노드 안에는 작성한 클래스나 텍스트와 같은 정보들이 포함되어 있다

  • 그리고 노드라는 오브젝트는 아래 그림과 같이 EventTarget 이라는 오브젝트를 상속하는데 결국 노드라는 오브젝트는 EventTarget의 오브젝트라는 것을 알 수 있다.

  • EventTarget에는 addEventListener, removeEventListener, dispatchEvent라는 총 세가지의 Method가 있는데 이를 통해 다른 모든 노드에서 addEventListenr 통해 이벤트를 등록할 수 있으며 모든 노드는 이벤트가 발생할 수 있다는 것을 알 수 있다

  • 또한 Node에서도 다양한 Method를 제공하기 때문에 아래처럼 Node를 상속하는 다른 오브젝트들에서도 Node에서 제공하는 Method 사용할 수 있다

  • DocumentNode를 상속하기 때문에 Document에서도 이벤트가 발생하고 있고, 이미지, html 요소들은 Element로 변환이 되는데 ElementNode를 상속하기 때문에 이벤트가 발생할 수 있다

  • 따라서 모든 노드는에서 이벤트가 발생할 수 있다

  • Element안에서도 다양한 Element가 있다. HTML 요소라면 HTMLElement가 되고 SVG 요소라면 SVGElement가 되는데 이처럼 각각의 타입별로 Element가 존재하게 된다

  • 그리고 HTMLElement 안에서는 어떤 태그를 쓰느냐에 따라서 HTMLInputElement, HTMLDivElement 등이 될 수 있다

  • 즉, 모든 태그의 요소를 위한 HTMLInputElement, HTMLDivElement등은 HTMLElement 를 상속한다.

  • 그리고 HTMLElementElement를 상속하고, ElementNode를, 그리고 NodeEvnetTarget을 상속한다

  • 즉, 브라우저는 HTML 코드를 해석해서 트리 형태로 구조화된 노드들을 가지고 있는 문서(DOM Tree)를 생성한다

  • HTML 문서가 브라우저에 의해 해석되어 실제 문서를 나타내는 노드 객체들의 트리 구조로 변환이되는 것이다.

  • 따라서 만든 HTML 파일이 브라우저가 읽을 때 DOM Tree로 변환되어 브라우저 웹페이지상에 나타나게 되고 프로그래밍 언어(자바스크립트)로 DOM Tree의 각 요소 (ex. HTMLDivElement)에 접근하여 요소를 수정, 삭제, 추가등과 같은 작업을 수행 할 수 있다’

  • DOM의 목적은 JS를 사용해서 이 문서에 대한 스크립트 작성(삭제, 추가, 바꾸기, 이벤트처리, 수정)을 위한 프로그래밍 인터페이스를 제공하는 것이다


  • 다음과 같은 html 파일은 DOM Tree로 변환하면 아래 그림과 같이 그릴 수 있다
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>header</h1>
  </body>
</html>

  • DOM Tree는 아래 그림과 같은 방식으로 만들어지는데, html 태그 안에 head태그와 body태그가 있는 것 처럼 제일 상위에 HTMLHtmlELement 노드가 있고 그 안에 HTMLHeadElement, HTMLBodyElement가 있다

  • 그리고 head 태그 안에 meta태그, title태그 link태그가 있는 것처럼 각 태그의 노드들이 HTMLHeadElement안에 있는 것을 확인할 수 있다

  • h1 태그 안에 텍스트가 있기 때문에 HTMLHeadingElement 안에 TextNode가 존재하게 된다


  • 브라우저가 실행될 때 웹페이지를 읽으면 글로벌 오브젝트에는 window 오브젝트가 들어가 있고 window 오브젝트에는 DOM, BOM, Javscript 같은 오브젝트들이 들어있다.

  • DOM 오브젝트 안에는 페이지별로 우리가 정의한 요소들이 Tree 형태로 구성되어 있고, BOM 오브젝트 안에는 브라우저와 관련된 오브젝트들인 navigator, location, fetch, storage와 같은 것들이, 그리고 Javascript 오브젝트 안에는 기본적인 Javascript와 관련된 Array, map, Date 같은 오브젝트들이 있다

  • 즉, window라는 글로벌 오브젝트 안에 각각의 DOM, BOM, JavaScript에 대한 데이터가 들어있는 것이다.


Reference









© 2020. by dkmqflx

Powered by dkmqflx