DOM (Document Object Model)이란?

브라우저 렌더링 엔진은 HTML문서를 파싱하여 브라우저가 이해할 수 있는 자료구조인 DOM을 생성합니다.

여기서 DOM이란, HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 프로퍼티와 메서드를 제공하는 트리 자료구조입니다.

DOM 트리 / 출처 : 위키피디아

HTML 요소는 HTML 문서를 구성하는 개별적인 요소를 의미하며 시작태그, 종료태그, 어트리뷰트 이름, 값, 콘텐츠로 이루어져 있습니다.

HTML 요소 / 출처 : 위키피디아

HTML 요소는 브라우저 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 변환됩니다.

HTML 문서는 HTML 요소들의 집합으로 이루어지며, 이들은 중첩 관계를 갖습니다.

또한 HTML 요소의 콘텐츠 영역에는 텍스트 뿐만 아니라 다른 HTML 요소도 포함 될 수 있습니다.

이때 HTML 요소 간의 중첩 관계에 의해 계층적인 부모 - 자식 관계가 형성되고, 이러한 HTML 요소 간의 부자 관계로 HTML 요소를 객체화한 모든 노드 객체들은 트리자료 구조로 구성됩니다.

노드 객체들로 구성된 트리 자료구조를 DOM (Document Object Model)이라 하며 DOM 트리라고 부르기도 합니다.

DOM API

HTML의 구조나 내용 또는 스타일 등을 동적으로 조작할 수 있도록 기능을 제공하는 프로퍼티와 메서드의 집합

DOM API 종류

HTML의 구조나 내용 등을 조작하려면 먼저 요소 노드에 접근해야합니다.

1. id를 이용해 노드 접근하는 방법

   document.getElementById()
   : 단 하나의 첫 번째 노드 반환

2. 태그 이름을 이용한 요소 노드 접근하는 방법

   document.getElementsByTagName()
   : 여러 개의 요소 노드 객체를 갖는 HTMLCollection 객체를 반환

3. class를 이용한 요소 노드 접근 방법

   document.getElementsByClassName()
   : 여러 개의 요소 노드 객체를 갖는 HTMLCollection 객체를 반환

4. CSS 선택자를 이용한 요소 노드 접근 방법

   document.querySelector(), document.querySelectorAll()
   : CSS 선택자를 만족시키는 모든 요소 노드를 탐색하여 반환, 여러 개의 요소 노드 객체를 갖는 NodeList 객체를 반환