DOM (1) - 노드

dia·2022년 6월 30일

자바스크립트 기초

목록 보기

2/4

HTML 문서의 계층적 구조와 정보를 표현하는 노드 객체들로 구성된 트리 자료구조로 이 노드 객체들을 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공한다.

렌더링 엔진이 HTML문서를 파싱하여 HTML 요소가 요소 노드 객체로 변환된다. 이때 어트리뷰트는 어트리뷰트 노드로, 텍스트는 텍스트 노드로 변환된다.

div 요소의 예시

<div id="foo">hello world</div>

HTML 요소는 중첩 관계를 갖고 이해 의해, 부모자식 관계가 형성된다. 이를 반영하여 모든 노드 객체들을 트리 자료 구조로 구성한다.

→ 노드 객체들로 구성된 트리 자료구조를 DOM 이라 한다.

비선형 자료구조
하나의 자료 뒤에 여러 개의 자료가 존재할 수 있는 자료구조. ex) 트리, 그래프

루트 노드
트리 자료구조의 최상위 노드. 부모 노드가 없으며 0개 이상의 자식 노드를 갖는다.

선형 자료구조
하나의 자료 뒤에 하나의 자료 만 존재하는 자료구조. ex) 배열, 스택, 큐, 링크드 리스트, 해시 테이블

리프 노드
자식 노드가 없는 노드

루트 노드로서 document 객체를 가리킨다.
브라우저가 렌더링한 HTML 문서 전체를 가리키는 객체. 전역 객체 window의 document 프로퍼티에 바인딩 되어있다. window.document 또는 document로 참조할 수 있다.
HTML 문서 당 document 객체는 유일하다.
- 자바스크립트 코드가 여러 script 태그에 의해 분리되어 있어도 하나의 전역 객체 window를 공유한다. 즉, 모든 자바스크립트 코드는 전역 객체 window의 document 프로퍼티에 바인딩 되어 있는 하나의 document 객체를 바라본다.

Comment 노드, DocumentType 노드, DocumentFragment 노드 등

자바스크립트 빌트인 객체가 아닌 브라우저 환경에서 추가적으로 제공하는 호스트 객체. 노드 객체가 자신의 부모, 형제, 자식을 탐색할 수 있으며, 어트리뷰트 및 텍스트 조작을 가능하게 한다.

노드 객체는 프로토타입에 의한 상속 구조를 갖는다.
- 노드 객체의 공통된 기능일수록 프로토타입 체인의 상위에, 개별적인 고유 기능일수록 프로토타입 체인의 하위에 프로토타입 체인을 구축

요소 노드 태그 종류별 인터페이스 :
HTMLHtmlElement, HTMLHeadElement, HTMLBodyElement, HTMLUListElement, etc
한 요소 노드 객체는 다양한 특성을 가지며 이에 따라 여러 가지 기능을 상속을 통해 제공받는다.

<input 요소의 예>

기능 구분	input 요소 노드 객체의 특성	프로토타입을 제공하는 객체
공통	객체	Object
공통	이벤트를 발생시키는 객체	EventTarget
공통	트리 자료구조의 노드 객체	Node
개별	브라우저가 렌더링할 수 있는 웹 문서 요소(HTML, XML, SVG)를 표현하는 객체	Element
개별	웹 문소 요소 중 HTML 요소를 표현하는 객체	HTMLElement
개별	HTML 요소 중 input 요소를 표현하는 객체	HTMLInputElement