DOM ( Document Object Model )

브라우저의 콘솔창에서 console.log(documnent)를 실행해보면 document 객체가 출력되는 것을 볼 수 있다. 반면 컴퓨터의 Node.js 환경에서 똑같이 console.log(documnent)를 실행해보면 document is not defined라고 에러가 발생한다.

document라는 객체가 브라우저 환경에서만 접근이 된다는 건 document 객체가 애초에 자바스크립트 자체의 요소가 아니라 브라우저란 환경에서 제공되는 것이라고 볼 수 있다.

사실 웹 개발에서 사용되는 document 객체는 브라우저에서 제공하는 window 객체의 한 요소이다. 그리고 window.document 객체를 DOM이라고 분류한다.

우리가 웹사이트에 접속하면 브라우저가 HTML 문서를 읽어들인다. 이후 브라우저가 HTML 문서를 해석(Parsing)한면 DOM이 만들어진다.

DOM은 왜 만들어질까?

왼쪽 HTML 문서를 브라우저가 파싱하면 오른쪽과 같은 트리 구조의 DOM이 만들어진다. DOM은 트리 전체를 말하고, 각 요소들 하나하나(document, html, head, ...)를 Node라고 한다.
우리가 자바스크립트로 웹페이지의 요소들을 제어할 수 있는건 요소들 하나하나가 API이기 때문이다.

위 코드의 document가 트리에서 document 노드를 가리키는 것을 알 수있다.

documnet 노드에는 getElementById라는 기능이 있는데 이것은 DOM 내에서 주어진 ID를 가진 노드 가져오는 기능을 실행한다. (여기선 'title', 즉 h1이라는 노드를 가져온다.)
title 변수에는 h1 노드가 들어있고 textContent는 h1노드의 기능이다.

상속관계

위 사진은 각 요소가 어떤 범주에 속하는지를 나타내는 상속도이다.

특정 ID를 가진 요소를 선택하는 document.getElementById 라는 기능은 Document의 고유 기능이다. 때문에 document에서만 사용 가능하다.
표시할 글자를 바꾸는데 사용했던 textContent 기능은 Node의 기능이다. 즉, 그 밑으로 들어오는 모든 요소들이 textContent 기능을 사용할 수 있다는 말이다.

그렇다면 모든 요소들이 기능을 사용할 수 있는 EventTarget에는 어떤 기능이 있을까? EventTarget은 이름에서 유추할 수 있듯 어떤 이벤트들의 대상이 된다는 것이다. 이는 클릭, 드래그, 키보드 입력, 요소 로드 등의 이벤트들을 말한다.

addEventListener는 EventTarget의 기능이기 때문에 그로부터 상속받는 모든 종류의 요소들에서 사용이 가능하다.
disabled 기능은 button이나 input 등의 요소들에 있는 기능이다.

DOM 요소들의 고유 기능과 상속관계를 알면 각각에서 무엇을 사용할 수 있는지 파악할 수 있다.

Web API

브라우저는 DOM 말고도, 사용자가 브라우저에서 일어날 일들을 프로그래밍 할 수 있도록 BOM (Browser Object Model)을 제공한다. BOM에는 아래와 같이 수많은 기능들이 있다.

• 다른 웹페이지로 이동
• 화면 관련 정보를 얻기
• 브라우저의 알림창 띄우기
• AJAX 요청을 보낼 때
• 등...

DOM과 BOM을 합쳐서 Web API라고 부른다. Web API는 자바스크립트의 기능은 아니지만 자바스크립트 등을 통해 제어될 수 있도록 브라우저에서 제공되고 있다.

참고
https://youtu.be/mFawNZz_Uu0