DOM 이란 무엇일까?

---

DOM(Document Object Model)은 XML이나 HTML 문서에 접근하기 위해

브라우저에 내장되어 있는 API 입니다.

 

기존에 자바스크립트는 HTML 조작에 특화된 언어라고 알고만 있었는데 과연 어떻게 자바스크립트는 HTML를 조작할 수 있는지 생각해 본 적이 없었다.

 

기본적으로 자바스크립트 문법에는 <p></p>, <div></div> 와 같은 태그요소들을 해석하는 문법이 없다.

따라서 자바스크립트가 HTML을 해석하고 조작하기위해서 자바르크립트가 읽을 수 있게 Object 형태로 정리한게 DOM 입니다. 

 

EX)

<div class="red-text">안녕하세요</div>

- 위와 같은 HTML 문서가 있을때  브라우저에서 이 HTML문서를 읽고 DOM을 만들게 됩니다.

var document = {
  div태그 : {
    style : {color : 'red', width : '100%'}
    innerHTML : '안녕하세요'
  }
}

- 가정으로 만든 DOM 형태 이지만 이런 형식의 object를 생성하게 되고 javascript도 이를 통해 HTML문서를 조작하고,    변경 할 수 있게 됩니다.

(위 예시는 DOM 이해를 돕기 위한 가정 일뿐 실제 DOM 형태가 아닙니다!!)

---

Dom의 트리구조

DOM은 위 사진과 같은 계층구조를 지니게 됩니다.

 

자바스크립트는 이러한 객체 모델을 이용하여 여러 작업을 할수 있게 됩니다.-

 

• 자바스크립트는 새로운 HTML 요소나 속성을 추가할 수 있습니다.
• 자바스크립트는 존재하는 HTML 요소나 속성을 제거할 수 있습니다.
• 자바스크립트는 HTML 문서의 모든 HTML 요소를 변경할 수 있습니다.
• 자바스크립트는 HTML 문서의 모든 HTML 속성을 변경할 수 있습니다.
• 자바스크립트는 HTML 문서의 모든 CSS 스타일을 변경할 수 있습니다.
• 자바스크립트는 HTML 문서에 새로운 HTML 이벤트를 추가할 수 있습니다.
• 자바스크립트는 HTML 문서의 모든 HTML 이벤트에 반응할 수 있습니다.

---