.png)
[JavaScript] DOM
- DOM(Document Object Model)이란 HTML 문서를 위한 프로그래밍 인터페이스이다.
- 구조화된 nodes와 property와 method를 갖고 있는 objects로 문서를 표현한다.
- 웹 페이지의 객체 지향 표현이며, 자바스크립트와 같은 스크립팅 언어를 이용해 DOM 을 수정할 수 있다.
- HTML이라는 문서를 이용하여 초기 화면을 구성하고, 브라우저가 만든 화면을 DOM으로 접근하고 제어한다. → 자바스크립트로 화면을 수정한다고 해서 HTML 문서 자체가 수정되는 것이 아니다.
DOM과 자바스크립트의 관계
- DOM이 없다면 자바스크립트는 웹 페이지 요소들과 관련된 모델이나 개념들에 대한 정보를 갖지 못하게 된다. 문서의 모든 element는 DOM의 한 부분이기 때문이다. → API (web or XML page) = DOM + JS (scripting language)
.some-text라는 클래스를 가진 요소를 선택하여 해당 요소의 텍스트를 수정하였다.
const $text = document.querySelector(".some-text");
$text.textContent = "Hello, World";이렇게 자바스크립트를 이용하여 HTML 문서를 조종할 수 있는 것은 DOM이라는 프로그래밍 인터페이스가 있기에 가능한 것이다.
트리 구조
- DOM은 트리 구조로 이루어져 있다.
.png)
- 트리의 각 요소를 노드(node)라고 정의하며, DOM은 관계를 설명하고 접근한다.
P.S.
실질적으로 웹페이지를 보여주는 표현이자, 개발자가 웹페이지에 접근하기 위한 주요 도구라면 DOM은 웹 개발 그 자체로 봐도 무방하지 않을까 싶다😲
