자바스크립트 DOM

 

오늘은 DOM에 대해 공부했습니다.

 

DOM의 생성

Document Object Model의 약자로HTML 문서를 파싱한 결과를 말합니다. 브라우저의 요청에 의해 응답된 HTML 문서는 파싱되어 브라우저가 해석할 수 있게 됩니다.

DOM 구조

위와 같이 HTML 문서가 파싱되면 각각의 노드들을 트리 자료구조로 구성하게 됩니다. 이 트리 구조를 DOM이라고 합니다.

DOM을 생성하는 과정에서 CSS를 로드하는 태그를 만나게 되면 CSSOM을 생성하게 되고 script 태그를 만나면 자바스크립트 코드를 파싱하기 위해 자바스크립트 엔진에 제어권을 넘기게 됩니다.

이때 자바스크립트 엔진이 코드를 해석하고 실행하게 되며 DOM API를 조작하는 코드가 있다면 DOM, CSSOM이 변경되고 다시 렌더링하는 과정을 거치게 됩니다.

 

노드

HTML 요소는 DOM을 구성하는 요소 노드 객체로 되어있으며 트리 자료구조의 형태를 띠고 있습니다. 노드는 총 12개의 타입이 있으며 크게 중요한 4가지 노드 타입이 존재합니다.

 

1. 문서 노드

문서 노드는 DOM 트리 최상위의 루트 노드로 document 객체를 가리킵니다. document 객체는 전역 객체 window에 바인딩되어 있으며 유일한 노드입니다.

 

2. 요소 노드

요소 노드는 HTML 요소를 가리키는 객체로 중첩에 의해 부자 관계를 가지고 있으며 문서의 구조를 표현합니다.

 

3. 어트리뷰트 노드

HTML 요소의 어트리뷰트를 가리키는 객체로 요소 노드와 연결되어 있습니다.

 

4. 텍스트 노드

HTML 요소의 텍스트를 가리키며 문서의 정보를 표현합니다. 요소 노드의 자식이며 요소 노드를 통해 접근할 수 있습니다.

 

DOM을 구성하는 노드 객체는 자바스크립트 객체로 프로토타입에 의한 상속 구조를 가집니다. 노드 타입에 따라 기능을 제공하는 DOM API를 자바스크립트 코드로 조작할 수 있습니다.

 

DOM 다루기

const body = document.querySelector('body');
const title = document.getElementById('title');
const div = document.getElementsByTagName('div');
const header = document.getElementByClassName('header');

자바스크립트로 DOM을 다루기 위해서는 먼저 요소 노드를 가져와야 합니다. 위와 같이 document 객체가 제공하는 메서드로 HTML의 특정 요소를 다양한 방법으로 가져올 수 있습니다.

 

 

노드 탐색 프로퍼티

취득한 노드를 기준으로 Node, Element 인터페이스를 통해 부모 노드, 자식 노드, 형제 노드 등에 접근할 수 있습니다.

이렇게 노드를 탐색하고 정보를 가져오는 데 성공했으면 쉽게 조작할 수 있습니다.

 

const foo = document.querySelector('foo');
const bar = document.querySelector('bar');

foo.nodeValue = 'Hello';
foo.textContent = 'Hello';

bar.innerHTML = 'World';

위와 같이 foo 노드의 값 또는 텍스트 노드를 변경할 수 있고 innerHTML로 bar의 DOM을 직접 조작할 수도 있으며 그 외에도 createElement, appendChild, cloneNode, removeChild 등 노드를 생성하고 복사하고 삭제하는 기능을 통해 동적으로 브라우저를 조작할 수 있습니다.

 

정리

DOM은 HTML 문서를 파싱한 결과물로 DOM을 조작할 수 있는 DOM API를 제공합니다.

DOM은 HTML 요소를 노드로 구성한 트리 구조로 되어있으며 DOM 트리라고도 합니다.

자바스크립트 코드를 통해 DOM 요소에 접근하여 조작할 수 있게 됩니다.

 

참고
모던 자바스크립트 딥 다이브