39장. DOM(1)

본 내용은 모던 자바스크립트 Deep Dive - 자바스크립트의 기본 개념과 동작 원리를 토대로 작성하였습니다.

39.0 DOM이란?

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

39.1 노드

39.1.1 HTML 요소와 노드 객체

• HTML요소 : HTML 문서를 구성하는 개별적인 요소
  • 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 변환
  • HTML 요소의 어트리뷰트는 어트리뷰트 노드로, 텍스트 콘텐츠는 텍스트 노드로 변환
  • 다른 HTML 요소를 포함할 수 있어 중첩 관계를 가질 수 있음
  • 계층적인 부자 관계가 형성

트리 자료구조

• 트리 자료구조
• 노드들의 계층 구조로 이루어진 자료구조
• 부모 노드와 자식 노드로 구상되어 노드간의 계층적 구조를 표현
• 루트 노드: 최상위 노드
  • 부모 노드가 없음
  • 0개 이상의 자식 노드를 가짐
• 리프 노드 : 자식 노드가 없는 노드
• 노드 객체들로 구성된 트리 자료구조를 DOM이라고 함(DOM 트리)

39.1.2 노드 객체의 타입

문서 노드

• DOM 트리의 최상위에 존재하는 루트 노드로서 document 객체를 가리킴
• 브라우저가 렌더링한 HTML 문서 전체를 가리키는 객체
• window의 document 프로퍼티에 바인딩
• HTML 문서당 document 객체는 유일
• DOM 트리의 노드들에 접근하기 위한 진입점(entry point) 역할

요소 노드

• HTML 요소를 가리키는 객체
• HTML 요소 간의 중첩에 의해 부자 관게를 가짐
  • 이를 통해 정보를 구조화

어트리뷰트 노드

• HTML 요소의 어트리뷰트를 가리키는 객체
• 요소 노드와 연결되어 있음
• 어트리뷰트 노드에 접근하려면 요소 노드에 접근해야 함

텍스트 노드

• HTML 요소의 텍스트를 가리키는 객체
• 자식 노드를 가질 수 없는 리프 노드
• 텍스트 노드에 접근하려면 요소 노드에 접근해야 함

39.1.3 노드 객체의 상속 구조

• 노드 객체는 ECMAScript 사양에 정의된 표준 빌트인 객체가 아니라 브라우저 환경에서 추가적으로 제공하는 호스트 객체
  • 자바스크립트 객체이므로 프로토타입에 의한 상속 구조를 가짐
• DOM은 HTML 문서의 계층적 구조와 정보를 표현하고 노드 타입에 따라 필요한 기능을 API로 제공
  • 이 DOM API를 통해서 HTML 구조, 내용, 스타일을 동적으로 조작 가능