DOM이란 무엇일까요?

DOM(Document Object Model)은 문서를 노드 및 객체로 표현한 것입니다. DOM은 웹을 다루는 데 사용되는 일종의 API입니다. DOM 모델을 사용하여 문서를 객체화하여 구조, 스타일, 콘텐츠를 변경할 수 있습니다.

 

DOM은 웹 문서를 트리 구조를 따라 웹 문서를 계층적으로 표현합니다. 다음 그림을 참고해보세요. 이는 기본적인 HTML 문서를 노드 트리를 따라 구조적으로 표현한 DOM의 예시입니다.

 

DOM과 자바스크립트

앞서 DOM이란 웹 문서를 다루는 데 사용되는 인터페이스라 정리했는데요. 대부분의 경우 자바스크립트를 통해 DOM을 제어할 수 있습니다. 다음 예시는 문서의 모든 <p> 태그를 선택하고 원하는 문단의 내용을 변경합니다.

const paragraphs = document.querySelectorAll("p");
const firstParagraph = paragraphs[0].innerText = "Hello, World!"

이처럼 자바스크립트를 사용하여 DOM을 통해 HTML 문서와 상호작용할 수 있습니다.