📁자바스크립트 탄생 배경

자바스크립트는 웹문서를 제어하기 위해 개발된 언어이다. 다시말해, HTML 문서를 조작하기 위한 언어이다.

그렇다면, 자바스크립트 언어로 어떻게 HTML 문서를 제어할까?

📁HTML 문서 제어 방법

브라우저에는 웹문서를 해석할 수 있는 렌더링 엔진이 있다.

브라우저로 HTML 문서를 열게 되면, 렌더링 엔진이 HTML 문서의 한줄 한줄을 해석한다. 렌더링 엔진은 해석된 태그를 즉시 객체화하여 DOM 트리에 추가한다. 이런 방식으로, 문서 전체를 객체화하여 자바스크립트 언어로 웹문서를 조작할 수 있게 한다. 이때 객체화된 문서로는 HTML 문서뿐 만 아니라 XML 문서, SVG 문서도 포함된다. 다만, DOM은 웹환경에서 주로 사용하기 때문에 HTML 중심으로 설명하겠다.

이처럼, 문서를 객체화 했다고 해서 DOM 이라고 한다.

📁Document Object Model

DOM은 Documnet Object Model (문서 객체모델)의 약어로, 자바스크립트 언어로 HTML 문서를 제어하기 위해서 웹문서를 객체화한 것이다. 이렇듯, DOM은 웹 문서를 객체화하여 자바스크립트 언어로 제어할 수 있게 해주는 브라우저에서 제공하는 API이다. API는 자바스크립트 언어 자체는 아니며, 자바스크립트는 이 API를 사용해서 문서를 조작할 수 있다.

📂DOM 트리

DOM은 트리 구조를 가진다. HTML 문서의 객체화된 각 태그는 DOM 요소이다. 이때 각각의 DOM 요소를 노드라고 한다. 자바스크립트 언어로 각각의 노드에 접근하여 제어할 수 있다.

DOM 요소, 즉 노드들은 트리 구조를 이루고 있다. 노드들은 부모-자식 관계를 맺으며, 서로 연결되어 트리 구조를 형성한다. DOM 요소는 문서 안에 있는 각각의 태그를 객체화 시킨 것이기 때문에, 자연스럽게 DOM은 트리구조를 가진다.

📂Browser Object Model

BOM은 Browser Object Model (브라우저 객체모델)의 약어로, 자바스크립트 언어로 브라우저 자체를 제어하기 위해서 브라우저를 객체화한 것이다.

📂document 객체

BOM에는 웹문서를 제어할 수 있게 하는 document 객체를 제공한다. document 객체는 웹페이지 자체를 의미하며, DOM 트리의 최상위 노드이다. 따라서, document 객체는 DOM 요소에 접근하기 위한 진입점이다. document 객체를 사용해서, 원하는 객체화된 HTML 요소에 접근할 수 있다.

document 객체를 사용해서, 최상위 노드에 접근할 수 있다.

document 객체로 DOM 요소에 접근한 후, textContent와 같은 DOM 요소의 프로퍼티를 사용해 DOM 요소를 제어할 수 있다.

🚀 DOM 요소에 접근할 때 더 쉬운 방법이 있다.

let domObject = document.querySelector('h1');
domObject.textContent = "제어합니다";

DOM 요소가 이루는 트리를 따라서 DOM 요소에 접근할 필요없이, querySelector()를 비롯한 메서드를 사용하여 간편하게 DOM 요소에 접근할 수 있다.

css 스타일을 적용할 대상을 지정하는데 사용되는 css 선택자를 querySelector() 인자로 넣어서 DOM 요소를 쉽게 가져올 수 있다. DOM 요소를 받아와서, 해당 DOM 요소의 프로퍼티 혹은 메서드를 사용해서 DOM 요소를 제어한다.

📁CSS Object Model

CSSOM은 CSS Object Model (CSS 객체모델)의 약어로, 자바스크립트 언어로 CSS 자체를 조작하기 위해서 CSS를 객체화한 것이다.

참고

• mdn 문서의 DOM 소개 참고: https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction
• DOM이란? 강의 자료: https://youtu.be/aTGhKjoZeao