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라는 항상 현재를 반영하는 살아있는 자식 노드 정보 리스트
ㅇ class 이름 리스트 프로퍼티
- classList라는 class 이름 관리를 위한 정보 리스트
3. DOM 노드(Node) 관계 프로퍼티
ㅇ 노드 간에는 서로 계층 관계를 이룸
- 부모-자식, 형제 관계를 이루며 모든 노드가 문서 트리를 구성하게 됨
ㅇ 노드 상하 관계 프로퍼티
- parentNode (직계 부모 노드)
- childNodes (직계 자식 노드들)
ㅇ 노드 이동/워킹(walking)/돌아다님(traverse)을 위한 5가지 프로퍼티
- 노드 관계 (1개 만 가리킴)
. parentNode (직계 부모)
. firstChild (첫번째 자식), lastChild (마지막 자식)
. previousSibling (직전 형제), nextSibling (직후 형제)
- 노드 리스트 (컬렉션/집합을 가리킴)
. childNodes[] (직계 자식들)
. children[] (모든 자손들)
4. DOM 노드의 내용을 읽고,변경하는 프로퍼티
ㅇ 요소 내 html : innerHTML
ㅇ 요소 내 텍스트 : textContent, innerText
ㅇ 例) 특정태그.innerHTML = "HTML 텍스트";
특정태그.innerText = "단순 텍스트";