DOM(Document Object Model)은 html 문서의 계층적 구조와 정보를 표현
이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조다.
노드
HTML 요소와 노드 객체
HTML 요소는 HTML 문서를 구성하는 개별적인 요소를 의미.
HTML 요소는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 반환
이때 html 요소의 어트리뷰트는 어트리뷰트 노드로 html 요소의 텍스트 콘텐츠는 텍스트 노드로 변환
html 요소 간의 부자 관계를 반영하여 html 문서의 구성 요소인 html 요소를 객체화한 모든 노드 객체들을 트리 자료 구조로 구성한다.
트리 자료 구조
트리 자료 구조는 노드들의 계층 구조로 이뤄진다.
부모 노드와 자식 노드로 구성되어 노드 간의 계층적 구조를 표현하는 비선형 자료구조를 말한다.
최상위 노드부터 시작, 최상위는 부모 노드가 없고 루트 노드라고 한다.
비선형 자료구조 : 하나의 자료 뒤에 여러 개의 자료가 존재할 수 있는 자료구조 트리와 그래프가 있다.
노드 객체들로 구성된 트리 자료구조를 DOM 이라고 한다.
노드 객체의 타입
노드 객체는 종류가 있고 상속 구조를 갖는다.
노드 객체는 총 12개의 종류가 있고 그 중 중요한 4가지 타입은 다음과 같다
**1. 문서노드**
DOM 트리의 최상위에 존재하는 루트 노드, document 객체를 가리킴
브라우저가 렌더링한 HTML 문서 전체를 가리키는 객체
전역 객체 window의 document 프로퍼티에 바인딩되어 있다.
브라우저 환경의 모든 자바스크립트 코드는 script 태그에 의해 분리되어도
하나의 전역 객체 window를 공유한다.
html 문서당 document 객체는 유일하다
문서노드, document 객체는 DOM 트리의 루트 노드이므로 DOM 트리의
노드들에게 접근하기 위한 진입점 역할.
**2. 요소 노드**
html 요소를 가리키는 객체.
html 요소 간의 중첩에 의해 부자 관계를 가진다.
이 부자 관계를 통해 정보를 구조화한다.
문서의 구조를 표현한다.
**3. 어트리뷰트 노드**
html 요소의 어트리뷰트를 가르키는 객체.
어트리뷰트가 지정된 html 요소의 요소 노드와 연결되어 있다.
요소 노드는 부모 노드와 연결되어 있지만 어트리뷰트 노드는 부모와
연결되어 있지 않고 요소 노드에만 연결되어 있다.
부모 노드가 없으므로 요소 노드의 형제 노드가 아니다.
접근하기 위해서는 먼저 요소 노드에 접근해야 한다.
**4. 텍스트 노드**
html 요소의 텍스트를 가리키는 객체.
텍스트 노드는 문서의 정보를 표현.
요소 노드의 자식 노드, 자식 노드를 가지를 수 없는 리프 노드다.
텍스트 노드는 DOM 트리의 최종단이다.
접근하기 위해서는 먼저 부모 노드인 요소 노드에 접근해야 한다.노드 객체의 상속 구조
DOM : html 문서의 계층적 구조와 정보를 표현하며, 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조
DOM은 HTML 문서의 계층적 구조와 정보를 표현하는 것은 물론, 노드 객체의 종류, 즉 노드 타입에 따라 필요한 기능을 프로퍼티와 메서드의 집합인 DOM API로 제공한다.
DOM API를 통해 HTML의 구조나 내용 또는 스타일 등을 동적으로 조작할 수 있다.
요소 노드 취득
html의 구조나 내용 또는 스타일 등을 동적으로 조작하려면 먼저 요소 노드를 취득해야 한다.
id를 이용한 취득
getElementById 메서드는 Document.prototype 의 프로퍼티다.
따라서 반드시 문서 노드인 Document를 통해 호출해야 한다.
