9/11 TIL

<목차>

1. DOM이란?
2. DOM과 자바스크립트
3. DOM 에 접근하는 방법

---

1. DOM이란?

• DOM(DOM:Document Object Model)이란 웹페이지가 로드될 때 브라우저가 생성하는 문서 객체모델을 말한다.
• HTML, XML 문서의 객체를 나타내고 상호작용하기 위한 API이다.
• DOM은 문서의 구조화된 표현(structured representation)을 제공한다. DOM은 문서를 논리 트리로 표현하고 각 노드는 객체를 갖는다.
• getElementById(), createElement(), 등의 API를 제공함으로써 자바스크립트와 같은 프로그래밍 언어가 DOM 구조에 접근하여 문서 구조 및 element의 스타일, 내용 등을 변경할 수 있게 도와준다.
  

< 문서와 문소의 요소에 접근하기 위해 DOM이 사용된 예시 >

document.body.style.background = 'red'; // 배경을 붉은색으로 변경하기

setTimeout(() => document.body.style.background = '', 3000); // 원상태로 복구하기

---

2.DOM과 자바스크립트

DOM 은 프로그래밍 언어는 아니지만 DOM 이 없다면 자바스크립트 언어는 웹 페이지 또는 XML 페이지 및 요소들과 관련된 모델이나 개념들에 대한 정보를 갖지 못하게 된다.

문서의 모든 element는 문서를 위한 document object model 의 한 부분이다. 때문에, 이러한 요소들을 DOM 과 자바스크립트와 같은 스크립팅 언어를 통해 접근하고 조작할 수 있는 것이다.

초창기에는 자바스크립트와 DOM 가 밀접하게 연결되어 있었지만, 나중에는 각각 분리되어 발전해왔다. 페이지 콘텐츠(the page content)는 DOM 에 저장되고 자바스크립트를 통해 접근하거나 조작할 수 있다.

---

3.DOM 에 접근하는 방법

웹브라우저에서 HTML파일을 받아 DOM으로 만들면 자바스크립트를 통하여 조작이 가능하다.

스크립트를 작성할 때(인라인 <script> 요소를 사용하거나 웹 페이지 안에 있는 스크립트 로딩 명령을 사용하여), 문서 자체를 조작하거나 문서의 children 을 얻기 위해 document 또는 window elements 를 위한 API 를 즉시 사용할 수 있다.