[Javascript] DOM(Document Object Model)

DOM(Document Object Model)

• HTML, XML 문서에 접근하기 위한 일종의 인터페이스이다.
• 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공한다.
• W3C의 표준 객체 모델로, 계층 구조로 표현된다.

DOM 트리

• 브라우저에서는 HTML코드를 해석하여 DOM이라는 객체형태의 모델로 저장한다.
• 그렇게 저장된 정보를 DOM Tree라고 한다.
• HTML element는 Tree형태로 저장되는 것이다.

---

• 복잡한 DOM 트리를 자바스크립트 탐색 알고리즘으로 탐색하는 것은 매우 힘들다.
• 그래서 브라우저에서는 DOM이라는 개념을 통해 다양한 DOM API를 제공한다.
• 브라우저는 DOM 트리를 찾고 조작하는 걸 쉽게 도와주는 여러 가지 메서드(DOM API)를 제공한다.
• DOM은 자바스크립트를 통해 동적으로 변경할 수 있으며 변경된 DOM은 렌더링에 반영된다.
  • HTML 요소나 속성 추가/제거/변경 CSS 스타일 변경 HTML 이벤트 추가/이벤트에 대한 반응

 

http://tcpschool.com/javascript/js_dom_concept

https://www.boostcourse.org/web316/lecture/16699?isDesc=false 

https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model