DOM Property   DOM 프로퍼티

(2019-02-12)
1. DOM 노드 특징DOM API웹페이지 문서 내의 모든 것을 노드 객체로 바라다 봄


2. DOM 노드(Node) 정보 프로퍼티노드 정보 프로퍼티 (node information property) : 노드 자신에 대한 정보
     - nodeType, nodeName, childNodes, nodeValue

  ㅇ 노드 종류 프로퍼티 (nodeType) : 총 12 가지
     - element (요소 노드, Node.ELEMENT_NODE) 1
        . 주로 html 요소들을 지칭 함
     - attribute (속성 노드) 2
     - text (텍스트 노드, Node.TEXT_NODE) 3
        . 텍스트를 가리킴
        . 자식노드는 없으나, 그 안에 글을 읽을 수 있는 프로퍼티가 있음
     - comment (주석 노드) 8
     - document (문서 노드) 9 
        . 전체 문서를 가리키는 Document 객체

  ㅇ 노드 이름 프로퍼티 (nodeName)
     - element 노드의 대문자 태그명 (例: BODY,HEAD 등)

  ㅇ 자식 노드 리스트 프로퍼티 (childNodes)
     - NodeList라는 항상 현재를 반영하는 살아있는 자식 노드 정보 리스트


3. DOM 노드(Node) 관계 프로퍼티

  ㅇ 노드 간에는 서로 계층 관계를 이룸
     - 부모-자식, 형제 관계를 이루며 모든 노드가 문서 트리를 구성하게 됨 

  ㅇ 노드 상하 관계 프로퍼티
     - parentNode (직계 부모 노드)
     - childNodes (직계 자식 노드들)

  ㅇ 노드 찾기/이동을 위한 5가지 프로퍼티  
     - 노드 관계 (1개 만 가리킴)
        . parentNode (직계 부모)
        . firstChild (첫번째 자식), lastChild (마지막 자식)
        . previousSibling (직전 형제), nextSibling (직후 형제)
     - 노드 리스트 (컬렉션/집합을 가리킴)
        . childNodes[] (직계 자식들)
        . children[] (모든 자손들)


4. DOM 노드의 내용을 읽고,변경하는 프로퍼티

  ㅇ 요소 내 html   : innerHTML
  ㅇ 요소 내 텍스트 : textContent, innerText

  ㅇ 例) 특정태그.innerHTML = "HTML 텍스트";
         특정태그.innerText = "단순 텍스트";


[JS DOM 제어] 1. DOM 트리 2. DOM 메소드 3. DOM 프로퍼티 4. DOM 노드 접근

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