DOM Property   DOM 프로퍼티

(2020-04-13)

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  ☞ MDN innerHTML
  ㅇ 요소 그 자체 및 내용을 html으로 : outerHTML  ☞ MDN outerHTML, innerHTML과 outerHTML 차이
  ㅇ 요소 내 내용을 텍스트로
     - textContent : 요소 내 숨긴 내용 등 모든 텍스트를  ☞ MDN textContent
     - innerText : 요소 내 사람이 읽을 수 있는 것 만을  ☞ MDN innerText


[JS DOM 제어] 1. DOM 트리 모델 2. DOM 트리,노드 3. DOM 메소드 4. DOM 프로퍼티 5. DOM 노드 접근 6. DOM 요소 컬렉션
  1.   기술공통
  2.   기초과학
  3.   진동/파동
  4.   방송/멀티미디어/정보이론
  5.   전기전자공학
  6.   통신/네트워킹
  7.   정보기술(IT)
        1. 정보기술
    1.   전산기초
    2.   컴퓨터구조
    3.   프로그래밍
          1. 프로그램, 프로그래밍
      1.   프로그래밍 언어론
      2.   프로그래밍 방법론
      3.   객체지향 프로그래밍
      4.   자료표현코드
      5.   자료구조
      6.   알고리즘
      7.   시스템 소프트웨어
      8.   프로그래밍언어 종류
            1. 프로그래밍 언어
        1.   C
        2.   C++
        3.   자바(Java)
        4.   자바스크립트
              1. JavaScript
              2. JS 기초 문법
          1.   JS 변수,타입,논리식
          2.   JS 구문,연산자
          3.   JS 함수
          4.   JS 객체
          5.   JS 배열/Map/Set
          6.   JS 활용
          7.   JS 웹문서 제어
                1. 웹문서 내 JS
                2. 동일 출처 정책
            1.   JS Window 객체
            2.   JS DOM 제어
              1.   1. DOM 트리 모델
                  2. DOM 트리,노드
                  3. DOM 메소드
                  4. DOM 프로퍼티
                  5. DOM 노드 접근
                  6. DOM 요소 컬렉션
            3.   JS 이벤트
            4.   Ajax
            5.   jQuery
        5.   PHP
        6.   파이썬
        7.   (기타 언어)
      9.   프로그래밍 기타일반
    4.   데이터베이스
    5.   소프트웨어 공학
    6.   운영체제
    7.   정보보호/보안
    8.   IT 기타기술
  8.   공학일반(기계,재료등)
  9.   표준/계측/품질
  10.   기술경영

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