웹 표준에서 말하는 DOM과 스크립트에 대한 이해

1. 선행지식

2018/08/25 - [잡담] - 컴퓨터 프로그램의 컴파일과 링킹과 객체지향

- 수행시간 (런타임)

- 정적인 것과 동적인 것의 구분 (static vs. dynamic)

2. DOM

^[각주:1]

HTML과 CSS는 웹 문서의 생김새를 정적으로 정의합니다.

그리고 브라우저가 이들을 로드하면 DOM이 됩니다.^{[각주:2][각주:3]}

그러니까 DOM은 런타임에만 존재하는 웹 문서의 실체입니다.

이해를 돕기 위해 비유하자면, 그것은 마치 C로 정의한 프로그램이 런타임에 프로세스가 되는 것과 같습니다.

(HTML : DOM = 프로그램 : 프로세스)

3. DOM API

브라우저는 웹 표준에 따라서 로드된 DOM을 클라이언트가 입맛대로 변조할 수 있게 하는 API를 제공합니다.^[각주:4]

이를 "웹 API"나 "DOM API"라고 부릅니다.^{[각주:5][각주:6][각주:7]}

4. DOM API에 자바스크립트를 쓰는 이유

DOM은 런타임에 존재하며, 따라서 DOM API의 수행도 런타임에 일어날 수밖에 없습니다.

그렇기 때문에 DOM API의 사용에는 스크립트 언어를 이용합니다.

Lua, Python, VBScript, JavaScript 따위가 그 후보로 거론될 수 있으나, 90년대 중반 여러 시도 끝에 자바스크립트(JavaScript)가 천하통일을 하고 맙니다.^[각주:8]

그렇게 해서, 오늘날의 웹 표준에서 일컫는 스크립트는 오직 자바스크립트 하나를 가리키게 되었습니다.

5. 자바스크립트와 DOM API 조합의 예시

웹 브라우저는 DOM을 로드한 뒤, "자바스크립트와 DOM API"를 통해서 런타임에 그것을 읽고 쓸 수 있게 합니다.

"자바스크립트와 DOM API"로 접근할 수 있는 DOM의 예시를 들면 다음과 같은 것들이 있습니다.

console

document

navigator

window

상기한 이름들은 자바스크립트 자체의 내장(built-in) 객체로 오인되는 경우도 있지만,^[각주:9] 실제로는 브라우저에 의해서 DOM API와 함께 제공됩니다.

1. https://css-tricks.com/dom/ [본문으로]
2. https://css-tricks.com/dom/ [본문으로]
3. 주석: 클라이언트의 브라우저는 웹 문서를 로드할 때, HTML을 DOM 구조라고 하는 일정한 형식으로 읽어들이며, 그 결과로 클라이언트의 메모리에 생성되는 것이 DOM-문서객체모델입니다. 즉, 웹 브라우저는 DOM을 로드해서 GUI로 렌더링해 주는 프로그램이 됩니다. [본문으로]
4. 주석: 그런 기술의 아이디어는 누가 개발했는지는 모르겠지만 너무나도 편리하고 좋은 발상입니다. 웹이 아닌 시스템의 일반적인 바이너리에 대해서 이것을 하려면 디버깅에서부터 메모리 읽고 쓰기나 코드 주입, 동적 모듈 주입과 같은 리버싱 테크닉을 이용해서 핵을 만듭니다. [본문으로]
5. https://developer.mozilla.org/en-US/docs/Web/API [본문으로]
6. https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model [본문으로]
7. https://www.w3schools.com/jsref/dom_obj_document.asp [본문으로]
8. https://stackoverflow.com/questions/11911138/why-web-browser-do-not-add-lua-vm [본문으로]
9. https://stackoverflow.com/questions/48083703/how-to-define-document-in-javascript [본문으로]