모던 자바스크립트 Deep Dive

39-1 노드

개발따라김양 2023. 1. 25. 13:44
  • DOM은 HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조
  • 노드
    • HTML 요소와 노드 객체
      • HTML요소는 HTML 문서를 구성하는 개별적인 요소를 의미
      • HTML 요소는 렌더링 엔진(자바스크립트 엔진 아님)에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 반환
      • HTML 요소의 어트리뷰트는 어트리뷰트 노드로, 텍스트 콘텐츠는 텍스트 노드로 변환
      • 트리 자료 구조
        • 노드들의 계층 구조로 이루어짐
        • 하나의 최상위 노드(=루트 노드)에서 시작
        • 자식이 없는 노드 = 리프 노드
        • 노드 객체들로 구성된 트리 자료 구조를 DOM이라 함
    • 노드의 객체 타입
      • 문서 노드
        • DOM 트리의 최상위에 존재하는 루트 노드, document 객체
        • 요소 노드, 어트리뷰트 노드, 텍스트 노드에 접근하려면 문서 노드를 통해야 함
      • 요소 노드
        • HTML 요소를 가리키는 객체
        • 중첩에 의해 부자 관계를 가지고 이 관계를 통해 정보를 구조화 함
      • 어트리뷰트 노드
        • HTML 요소의 어트리뷰트를 가리키는 객체
        • 어트리뷰트가 지정된 HTML 요소의 요소 노드와 연결되어 있음
        • 어트리뷰트를 참조하거나 변경하려면 요소 노드에 먼저 접근해야 함
      • 텍스트 노드
        • HTML 요소의 텍스트를 가리키는 객체
        • 문서의 정보를 표현
        • 자식 노드를 가질 수 없는 리프 노드
          • 부모 요소 노드에 먼저 접근 해야 함
    • 노드 객체의 상속 구조
      • DOM을 구성하는 노드 객체는 자신의 구조와 정보를 제어할 수 있는 DOM API를 사용할 수 있음.
      • 이를 통해 노드 객체는 자신의 부모, 형제, 자식을 탐색할 수 있으며, 자신의 어트리뷰트와 텍스트를 조작할 수 있음
      • 모든 노드 객체는 Object, EventTarget, Node 인터페이스를 상속 받음
      • 노드 객체에는 노드 타입에 상관없이 모든 노드 객체가 공통으로 갖는 기능도 있고, 노드 타입에 따라 고유한 기능도 있음
      • DOM은 HTML 문서의 계층적 구조와 정보를 표현하는 것은 물론 노드 객체의 종류, 즉 노드 타입에 따라 필요한 기능을 프로퍼티와 메서드의 집합인 DOM API로 제공함 이 DOM API를 통해 HTML의 구조나 내용 또는 스타일 등을 동적으로 조작 가능함
      • DOM은 HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조
      • 노드
        • HTML 요소와 노드 객체
          • HTML요소는 HTML 문서를 구성하는 개별적인 요소를 의미
          • HTML 요소는 렌더링 엔진(자바스크립트 엔진 아님)에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 반환
          • HTML 요소의 어트리뷰트는 어트리뷰트 노드로, 텍스트 콘텐츠는 텍스트 노드로 변환
          • 트리 자료 구조
            • 노드들의 계층 구조로 이루어짐
            • 하나의 최상위 노드(=루트 노드)에서 시작
            • 자식이 없는 노드 = 리프 노드
            • 노드 객체들로 구성된 트리 자료 구조를 DOM이라 함
        • 노드의 객체 타입
          • 문서 노드
            • DOM 트리의 최상위에 존재하는 루트 노드, document 객체
            • 요소 노드, 어트리뷰트 노드, 텍스트 노드에 접근하려면 문서 노드를 통해야 함
          • 요소 노드
            • HTML 요소를 가리키는 객체
            • 중첩에 의해 부자 관계를 가지고 이 관계를 통해 정보를 구조화 함
          • 어트리뷰트 노드
            • HTML 요소의 어트리뷰트를 가리키는 객체
            • 어트리뷰트가 지정된 HTML 요소의 요소 노드와 연결되어 있음
            • 어트리뷰트를 참조하거나 변경하려면 요소 노드에 먼저 접근해야 함
          • 텍스트 노드
            • HTML 요소의 텍스트를 가리키는 객체
            • 문서의 정보를 표현
            • 자식 노드를 가질 수 없는 리프 노드
              • 부모 요소 노드에 먼저 접근 해야 함
        • 노드 객체의 상속 구조
          • DOM을 구성하는 노드 객체는 자신의 구조와 정보를 제어할 수 있는 DOM API를 사용할 수 있음.
          • 이를 통해 노드 객체는 자신의 부모, 형제, 자식을 탐색할 수 있으며, 자신의 어트리뷰트와 텍스트를 조작할 수 있음
          • 모든 노드 객체는 Object, EventTarget, Node 인터페이스를 상속 받음
          • 노드 객체에는 노드 타입에 상관없이 모든 노드 객체가 공통으로 갖는 기능도 있고, 노드 타입에 따라 고유한 기능도 있음
          • DOM은 HTML 문서의 계층적 구조와 정보를 표현하는 것은 물론 노드 객체의 종류, 즉 노드 타입에 따라 필요한 기능을 프로퍼티와 메서드의 집합인 DOM API로 제공함 이 DOM API를 통해 HTML의 구조나 내용 또는 스타일 등을 동적으로 조작 가능함
저작자표시