DOM Property   DOM 프로퍼티

(2019-08-16)

innerHTML, innerText

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


2. DOM 노드정보 프로퍼티노드 정보 프로퍼티 (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라는 항상 현재를 반영하는 살아있는 자식 노드 정보 리스트

  ㅇ class 이름 리스트 프로퍼티 
     - classList라는 class 이름 관리를 위한 정보 리스트


3. DOM 노드의 관계 프로퍼티

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

  ㅇ 노드 상하 관계 프로퍼티
     - 단일 노드
        . parentNode (직계 부모)
        . firstChild (첫번째 자식)
           .. firstChild : element,text,comment 노드 모두를 대상으로 함
           .. firstElementChild : 오직 element 노드 만을 대상으로 함
        . lastChild (마지막 자식)
        . previousSibling (직전 형제)
        . nextSibling (직후 형제)
     - 노드 리스트 (컬렉션)   ☞ DOM 요소 컬렉션 참조
        . childNodes (직계 자식들)
        . children (모든 자손들)

  ※ 용도
     - 노드 이동/워킹(walking)/돌아다님(traverse)을 위함


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

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

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


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

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