holdanddeepdive/javascript-deep-dive

39장 DOM

Opened this issue · 0 comments

  • DOM: HTML 문서의 계층적 구조와 정보를 표현하여 제어 가능한 API를 제공하는 트리 자료구조
  • 요소는 HTML 문서를 구성하는 개별적인 요소로 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 변환

노드의 종류

12개의 타입이 있으나 중요한 타입은 4가지

  • 문서 노드: DOM 트리 최상위에 존재하는 루트 노드, document 객체
    • 모든 자바스크립트 코드는 전역 객체 window의 document 프로퍼티에 바인딩된 하나의 document 객체를 바라봄
  • 요소 노드: HTML 요소를 가리키는 객체, 정보의 구조화
  • 어트리뷰트 노드: 어트리뷰트가 지정된 HTML 요소의 요소 노드와 연결, 부모 노드는 없다
  • 텍스트 노드: HTML 요소의 텍스트를 가리키는 객체, DOM 트리의 최종단으로 접근하려면 요소 노드에 접근해야 함

DOM을 구성하는 노드 객체는 ECMA 사양에 정의된 표준 빌트인 객체가 아니라 브라우저 환경에서 추가적으로 제공하는 호스트 객체