JavaScript - DOM & Node

DOM의 종류

• Core DOM : 모든 문서 타입을 위한 DOM 모델
• HTML DOM : HTML 문서를 위한 DOM 모델
• XML DOM : 문서를 위한 DOM모델

HTML DOM

HTML 문서를 조작하고 접근하는 표준화된 방법
모든 HTML 요소는 HTML DOM을 통해 접근 가능

Document 객체

웹페이지를 의미
웹페이지에 존재하는 HTML 요소에 접근하고자 할 때는 반드시 Document 객체부터 시작해야 한다.

Document 메소드

HTML 요소와 관련된 작업을 도와주는 다양한 메소드 제공

• HTML 요소의 선택
• HTML 요소의 생성
• HTML 이벤트 핸들러 추가
• HTML 객체의 선택

Node & Node Tree

HTML DOM 에서 정보를 저장하는 계층적 단위
노드 트리는 노드들의 집합으로, 노드 간의 관계 (계층적 관계)

계층적 관계 = 부모자식 관계, 형제 관계

JS에서는 HTML DOM을 이용하여 노드 트리에 포함된 모든 노드에 접근할 수 있다.

노드의 종류

• 문서 노드 (Document Node) : HTML 문서 전체를 나타내는 노드
• 요소 노드 (Element Node) : 모든 HTML 요소는 요소 노드로, 속성 노드를 가질 수 있는 유일한 노드
• 주석 노드 (Comment Node) : HTML 문서의 모든 주석은 주석 노드
• 속성 노드(Attribute Node) : 모든 HTML 요소의 속성은 속성 노드이며, 요소 노드에 관한 정보를 가진다.(해당 요소 노드의 자식노드[child node]에는 포함되지 않음)
• 텍스트 노드 (Text Node) : HTML 문서의 모든 텍스트는 텍스트 노드

노드의 값

노드에 대한 정보는 다음과 같은 프로퍼티를 통해 접근 가능

nodeName(이름), nodeValue(값), nodeType(타입)

document.childNodes[0].nodeName;
// HTML 문서의 모든 자식 노드 중에서 첫 번째 노드의 이름을 선택

document.getElementById("heading).firstChild.nodeValue
// 아이디가 "heading" 인 요소의 첫 번째 자식 노드의 노드값을 선택

document.getElementById("heading").firstChild.nodeType;
// 아이디가 "heading" 인 요소의 첫 번째 자식 노드의 타입을 선택

nodeType 프로퍼티 값

노드타입의 프로퍼티 값은 텍스트가 아닌 숫자로 표현

요소 노드:1
속성 노드: 2
텍스트 노드: 3
주석 노드: 8
문서 노드: 9