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 문서와 상호작용할 수 있습니다.
'개발 > HTML' 카테고리의 다른 글
HTML에서 언어(lang)를 지정해주는 이유는 무엇일까요? (0) | 2021.05.12 |
---|---|
<div>와 <span> 태그 차이 설명 (0) | 2021.05.12 |
블록 요소와 인라인 요소의 차이와 태그 설명 ✔️ (0) | 2021.05.12 |