Document Object Model

DOM : 구조화된 문서를 객체로 표현하는 형

브라우저의 렌더링 엔진은 HTML문서를 파싱하여 브라우저가 이해할 수 있는 자료구조인 DOM을 생성한다.

DOM은 HTML문서의 계층적 구조와 정보를 표현하며, 이를 제어 할 수 있는 API,즉 프로퍼티와 메서드를 제공하는 트리 자료구조이다.

KakaoTalk_20220801_161851885.jpg

HTML 페이지에 작성하는 마크업(h1,p)은 웹브라우저에 알려주는 DOM 클래스의 메타 정보이다.

브라우저는 마크업 태그와 1:1 매칭되는 DOM 클래스의 개체를 생성해 보관하고 있다.

메모리에 웹 페이지 문서 구조를 표현함으로써 스크립트 및 프로그래밍 언어와 페이지를 연결합니다.

DOM과 노드와의 관계

노드는 DOM의 구성원으로서 HTML 웹페이지 구성요소의 가장 작은 단위이다.

기본 적인 HTML태그와 주석까지 모두 노드에 해당한다.

웹브라우저는 이런 노드들을 읽어 들어 해석한 후 각 노드와 1:1 대응하는 DOM객체를 생성한다.

노드 객체의 상속 구조

DOM은 HTML문서의 계층적 구조와 정보를 표현하며, 이를 제어 할 수 있는 API,즉 프로퍼티와 메서드를 제공하는 트리 자료구조이다.

DOM의 구성원인 노드 객체는 자신의 구조와 정보를 제어할 수 있는 DOM API를 사용할 수 있다.

KakaoTalk_20220801_164528752.jpg