DOM 트리, DOM 노드

1. DOM 트리

  ㅇ 웹페이지 내의 모든 것을, 노드들로 이루어진 트리 구조로써 바라다 봄


2. DOM 노드

  ㅇ (DOM 트리를 구성하는 객체 하나하나를 노드(Node) 라고 함)
     - 루트 노드는, document 노드이고,
     - 이것의 직계 자식 노드는, html 노드 뿐이며,
     - html 노드 밑에 다수의 요소 노드들이, 전형적인 트리 구조를 구성함 


3. DOM 노드의 특징 

  ㅇ (루트 노드를 제외하고, 모든 노드에는, 다음과 같은 특징들이 있음)
     - 타입 : nodeType (정수 값/ 타입 번호) 프로퍼티가 있음
        . 노드 타입으로는, 요소,텍스트,속성,주석,문서 등이 있음
        . 例 : 1 (요소 노드), 2 (속성 노드), 3 (텍스트 노드), 8 (주석 노드) 등
     - 이름 : nodeName (대문자 이름) 프로퍼티가 있음
        . 例 : FORM (form 요소), HEAD (head 요소), A (a 요소) 등
     - 관계 : 모든 노드들은 서로 간에 관계(부모,형제,자식)가 있음
        . 부모 노드가 있고, 자식 노드는 없어도 됨
        . (부모) parentNode : 자신의 직계 부모 노드를 가리킴
           .. 특히, document 노드는 그 부모가 null인 루트 노드(전역 객체) 임
        . (자식) childNodes : 모든 직계 자식 노드들을 가리키는 유사 배열 객체
        . (형제) previousSibling, nextSibling : 직전,직후 형제 노드를 가리킴
        . 例) (부모) html 요소 > (자식) head 요소, body 요소 : 이 둘은 형제 관계  
 
  ㅇ 결국, 웹페이지 내 모든 것들을 노드로써 바라다 봄


4. DOM 노드의 종류

    


5. 주요 노드별 구분

  ㅇ 문서 노드 (DOCUMENT_NODE)
     - 전체 문서를 가리킴
        . HTMLDocument 요소      ☞ MDN web docs (HTMLDocument Interface) 참조
        . Document 객체      ☞ MDN web docs (Document Interface) 참조
           .. 전체 문서 그 자체를 가리키는 루트 노드 ("document."로 참조 가능)
           .. 웹브라우저에 의해 로드된 웹페이지의 내용(컨텐츠)에 대한 진입점 역할 

  ㅇ 요소 노드 (ELEMENT_NODE)
     - 텍스트 노드,주석 노드(Node) 등이 빠진 요소(Element)들을 말함
        . HTML*Element 요소
           .. HTMLFormElement                ☞ MDN web docs (HTMLFormElement)
           .. HTMLDivElement, HTMLLIElement 등 
        . HTML 태그 당 하나의 객체 (구체화된 태그 요소)
        . ( Node > Element > HTMLElement > HTML*Element )

  ㅇ 속성 노드 (ATTRIBUTE_NODE)
     - 속성, 스타일 등을 표현하는 객체
        . attribute, style, runtimeStyle, currentStyle, rule, textNode, textRange, 
          textRectangular 등