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 위치 참조