728x90
반응형
DOM(Document Object Model, 문서 객체 모델)이란?
💡 DOM이란 HTML, XML와 같은 문서의 프로그래밍 인터페이스입니다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있도록 돕습니다.
위의 설명은 MDN 공식 문서에서 DOM에 대해 설명하고 있는 문장입니다.
즉, 웹 문서를 구조화된 방식으로 표현하여 프로그래밍 언어를 이용하여 문서 구조, 스타일 및 내용에 접근할 수 있도록 하는 인터페이스를 제공하는 것을 DOM 이라고 합니다.
DOM의 구조
DOM은 트리 구조로 표현되며, 각 노드는 문서의 일부를 나타내게 됩니다.
예를 들어 다음과 같은 HTML 코드가 있다고 가정해봅시다.
<!DOCTYPE html>
<html>
<head>
<title>example</title>
</head>
<body>
<h1>hello world</h1>
<p>DOM 예제입니다</p>
</body>
</html>
이를 DOM의 트리 구조로 표현하면 다음과 같습니다.
위의 그림에서 html, head, body, title 등과 같은 요소들이 노드입니다.
DOM을 이용하여 웹 문서의 내용을 변경하기
JavaScript와 같은 프로그래밍 언어를 사용하여 특정 요소를 선택하여 내용을 변경할 수 있습니다.
이전에 알아본 HTML 코드의 h1 태그 내용을 변경하고 싶다면 다음과 같이 작성할 수 있습니다.
document.querySelector('h1').textContent = "change"
위와 같은 자바 스크립트 코드를 실행시키면 다음과 같이 h1 태그의 내용이 변경되게 됩니다.
단순한 수정이외에도 DOM을 사용하면 웹 문서를 조작할 수 있습니다.
정리
- 웹 문서를 구조화된 방식으로 표현하여 프로그래밍 언어를 이용하여 문서 구조, 스타일 및 내용에 접근할 수 있도록 하는 인터페이스를 제공하는 것을 DOM이라고 합니다.
- DOM은 트리 구조를 가지며, 각 요소들을 노드라고 부릅니다.
- DOM을 이용하여 JavaScript와 같은 프로그래밍 언어를 사용해서 웹 문서를 조작할 수 있습니다.
참고
MDN 공식 문서 DOM(Document Object Model)
반응형