DOM 트리, DOM 노드

(2021-01-02)

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 등

JS DOM 제어
   1. DOM 트리 모델   2. DOM 트리,노드   3. DOM 메소드   4. DOM 프로퍼티   5. DOM 노드 접근   6. DOM 요소 컬렉션   7. DOM 크기,위치  


Copyrightⓒ written by 차재복 (Cha Jae Bok)               기술용어해설 후원
"본 웹사이트 내 모든 저작물은 원출처를 밝히는 한 자유롭게 사용(상업화포함) 가능합니다"