DOM Property   DOM 프로퍼티

(2022-04-30)

innerHTML, innerText, textContent


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


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

  ㅇ 노드 종류 프로퍼티 (nodeType) : 총 12 가지             ☞ MDN Node.nodeType 참조
     - element (요소 노드) : 1 (Node.ELEMENT_NODE)
        . 주로 html 요소들을 지칭 함 (例, body 요소, a 요소, p 요소, img 요소 등)
     - attribute (속성 노드) : 2 (Node.ATTRIBUTE_NODE)
     - text (텍스트 노드) : 3 (Node.TEXT_NODE)
        . 텍스트를 가리킴
        . 자식노드는 없으나, 그 안에 글을 읽을 수 있는 프로퍼티가 있음
     - comment (주석 노드) : 8 (Node.COMMENT_NODE)
     - document (문서 노드) : 9 (Node.DOCUMENT_NODE)
        . 전체 문서를 가리키는 Document 객체
     - document type (문서 타입 노드) : 10 (Node.DOCUMENT_TYPE_NODE)
        . 문서 타입 (例, <!DOCTYPE html>)

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

  ㅇ 자식 노드 리스트 프로퍼티 (childNodes)
     - 항상 현재를 반영하는 살아있는 자식 노드 정보 리스트
     - 모든 직계 자식 노드들을 가리키는 유사 배열 객체
     - 읽기 전용

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


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

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

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

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


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

  ㅇ (text/html으로 파싱) 요소 내용을 html으로
     - innerHTML : 요소 내 내부 내용 만을 html으로  ☞ MDN innerHTML
     - outerHTML : 요소 그 자체 및 내부 내용을 html으로  ☞ MDN outerHTML, innerHTML과 outerHTML 차이

  ㅇ (text/plain으로 파싱) 요소 내부 내용을 텍스트로
     - textContent : 요소 내 숨긴 내용 등 모든 텍스트를  ☞ MDN textContent
     - innerText : 요소 내 사람이 읽을 수 있는 것 만을  ☞ MDN innerText


5. DOM 노드의 크기 및 위치

  ※ ☞ DOM 크기, DOM 위치 참조

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


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