DOM 트리, DOM 노드

(2019-11-11)
1. DOM 트리웹페이지 내의 모든 것을, 노드들로 이루어진 트리 구조로써 바라다 봄


2. DOM 노드

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


3. DOM 노드의 특징 

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


4. DOM 노드의 종류

    

  ㅇ 주요 종류들의 구분
     - 문서 노드 (9) : HTMLDocument 요소 
        . 전체 문서를 가리키는 Document 객체 
        . 즉, 문서 그 자체를 가리키는 루트 노드 ("document."로 참조 가능)
     - 요소 노드 (1) : HTML*Element 요소
        . HTMLFormElement, HTMLLIElement 등 (구체화된 태그 요소)
        . 즉, HTML 태그 당 하나의 객체
     - 속성 노드 (2) : 속성, 스타일, 텍스트를 표현하는 객체
        . attribute, style, runtimeStyle, currentStyle, rule, textNode, textRange, 
          textRectangular 등

  ※ ☞ DOM 모델 상의 노드(nodeType) 유형 (실제 실행 : 현재 수행중인 웹브라우저 내에서 실행)


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

 
        최근수정     요약목록     참고문헌