본문 바로가기
온라인 멘토와 함께하는 공부/HTML

[HTML] DOM이란?

by 열공노년 2023. 12. 6.
반응형

HTML에서 DOM

HTML에서 'DOM'은 '문서 객체 모델(Document Object Model)'의 약자입니다. DOM은 웹 페이지의 구조를 표현하는 프로그래밍 인터페이스로, 웹 페이지를 구성하는 HTML, XML 문서를 트리 구조로 나타냅니다. 이 트리 구조는 웹 페이지의 각 요소를 노드(Node)로 표현하며, 각 노드는 HTML 태그나 텍스트 등의 요소를 나타냅니다.

DOM의 주요 특징과 기능은 다음과 같습니다.

  1. 트리 구조: DOM은 웹 페이지를 계층적인 트리 구조로 나타냅니다. 이 구조에서 각 HTML 태그는 노드가 되며, 이들 노드가 서로 상하 관계를 이루면서 전체 페이지의 구조를 형성합니다.
  2. 언어 독립성: DOM은 특정 프로그래밍 언어에 종속되지 않습니다. JavaScript와 같은 언어를 사용하여 DOM을 조작할 수 있으며, 이를 통해 웹 페이지의 콘텐츠, 스타일, 구조를 동적으로 변경할 수 있습니다.
  3. 동적 인터랙션: DOM을 사용하면 웹 페이지가 정적이지 않게 됩니다. 사용자의 상호작용(예: 버튼 클릭, 폼 제출)에 응답하여 페이지의 일부를 변경하거나, 새로운 내용을 추가하고 삭제하는 등의 동적인 작업을 수행할 수 있습니다.
  4. 표준화: DOM은 W3C(World Wide Web Consortium)에 의해 표준화되어 있습니다. 이는 다양한 브라우저와 플랫폼에서 일관된 방식으로 웹 페이지를 처리하고, 스크립트가 웹 페이지와 상호작용할 수 있도록 보장합니다.

정리

간단하게 말해, DOM은 웹 페이지의 모든 요소에 접근하고 조작할 수 있는 프로그래밍 인터페이스로, 웹 페이지를 동적으로 만드는 데 핵심적인 역할을 합니다. 웹 개발자들은 DOM을 통해 JavaScript 등의 언어로 웹 페이지의 구조와 스타일, 콘텐츠를 실시간으로 변경할 수 있습니다.

반응형