DOM(문서 개체 모델)은 개발자가 JavaScript와 같은 스크립팅 언어를 사용하여 웹 문서와 상호 작용할 수 있도록 하는 중요한 인터페이스입니다. HTML이나 XML과 같은 웹 문서의 콘텐츠에 대한 구조적, 계층적, 논리적 보기를 트리 구조로 나타냅니다.
문서 개체 모델(DOM)의 탄생
DOM의 개념은 더 많은 대화형 웹 콘텐츠를 허용해야 하는 필요성의 결과로 1990년대 중후반에 처음 등장했습니다. 동적 웹사이트의 출현과 JavaScript의 광범위한 사용으로 인해 스크립트가 문서 구조, 스타일 및 콘텐츠를 변경할 수 있는 모델이 필요했습니다. W3C(World Wide Web Consortium)는 이러한 목적을 위해 표준화된 API를 만드는 작업을 맡았고 결과적으로 DOM이 개발되었습니다.
최초의 표준 DOM 레벨인 DOM 레벨 1은 1998년 W3C에 의해 도입되었습니다. 이는 문서의 일부를 변경하는 수단을 포함하여 전체 HTML 또는 XML 문서에 대한 포괄적인 모델을 제공했습니다.
DOM(문서 개체 모델) 확장
DOM은 본질적으로 프로그램과 스크립트가 문서의 콘텐츠, 구조 및 스타일에 동적으로 액세스하고 업데이트할 수 있도록 하는 플랫폼이자 언어 중립적인 인터페이스입니다.
DOM은 요소, 속성, 텍스트 등 문서의 일부를 나타내는 노드 계층으로 구성됩니다. 이러한 논리적 트리 구조를 통해 문서 내용을 쉽게 탐색하고 조작할 수 있습니다.
웹 문서는 모두 속성과 메서드를 갖고 있고 다른 개체를 포함할 수 있는 개체 트리로 모델링됩니다. 예를 들어 HTML 문서는 "body", "div", "span", "p"와 같은 요소와 해당 속성 및 텍스트 콘텐츠를 나타내는 개체로 변환됩니다.
DOM(문서 개체 모델) 작동 방식
DOM의 내부 구조는 노드 트리로 구성됩니다. 최상위 노드는 Document 전체 문서를 나타내는 노드입니다. 이 아래에는 Element 노드는 페이지의 HTML 요소에 해당합니다. Attribute 노드는 요소의 속성을 보유하며, Text 노드는 요소의 텍스트 콘텐츠를 보유합니다.
이 계층 구조를 통해 개발자는 문서 트리를 탐색하고 API 메서드를 사용하여 노드를 선택, 생성, 수정 또는 삭제할 수 있습니다.
다음은 HTML 문서가 DOM 트리로 표시되는 방식에 대한 예입니다.
수학Document
↳ Element: html
↳ Element: head
↳ Element: title
↳ Text: "Title of the Document"
↳ Element: body
↳ Element: h1
↳ Text: "Hello, world!"
↳ Element: p
↳ Text: "This is a paragraph."
DOM(문서 개체 모델)의 주요 기능
-
트리 구조: DOM은 탐색, 선택, 조작을 간단하고 직관적으로 만드는 논리적 트리 구조로 문서를 나타냅니다.
-
언어 중립적: DOM은 특정 프로그래밍 언어에 묶여 있지 않습니다. 이는 HTML, XML 및 기타 문서 유형의 개체를 표현하고 상호 작용하기 위한 규칙입니다.
-
동적 액세스 및 업데이트: DOM을 사용하면 프로그램이 문서의 콘텐츠, 구조 및 스타일에 동적으로 액세스하고 업데이트할 수 있습니다.
-
표준화됨: DOM은 W3C 표준으로, 다양한 브라우저와 플랫폼에서 광범위한 수용과 호환성을 보장합니다.
DOM(문서 개체 모델)의 유형
DOM 사양은 여러 "레벨"과 "모듈"로 나누어져 있으며, 각각은 이전 사양에 특징과 기능을 추가합니다. 주요 유형은 다음과 같습니다.
| DOM 레벨/유형 | 간단한 설명 |
|---|---|
| DOM 레벨 1 | 요소 및 해당 속성을 조작하는 방법을 포함하여 전체 HTML 또는 XML 문서에 대한 기본 모델을 제공합니다. |
| DOM 레벨 2 | 네임스페이스 처리, CSS를 지원하는 스타일 모듈, 테이블, 이벤트 등을 처리하는 몇 가지 새로운 인터페이스와 같은 기능이 도입되었습니다. |
| DOM 레벨 3 | XPath 및 키보드 이벤트 처리에 대한 지원이 추가되고 문서 로드 및 저장을 위한 인터페이스가 도입되었습니다. |
| DOM 레벨 4 | 종속성을 줄여 핵심 DOM을 단순화하고 비동기 작업에 대한 약속을 도입했으며 더 쉬운 노드 조작을 위해 상위 기능과 같은 더 많은 기능을 추가했습니다. |
DOM(문서 개체 모델) 활용
DOM은 JavaScript를 사용하여 웹페이지를 조작할 때마다 사용됩니다. 이는 수많은 웹 기술의 기본 API입니다.
개발자는 DOM을 사용하여 전체 페이지를 다시 로드할 필요 없이 웹 페이지의 모양, 느낌 및 콘텐츠를 동적으로 변경하므로 대화형 및 반응형 사용자 인터페이스가 가능합니다.
그 강력함에도 불구하고 DOM에도 문제가 없는 것은 아닙니다. 특히 크거나 복잡한 웹 문서의 경우 주의 깊게 사용하지 않으면 속도가 느려질 수 있습니다. 제대로 최적화되지 않은 DOM 조작으로 인해 페이지 렌더링 속도가 느려지고 인터페이스가 응답하지 않을 수 있습니다. 이 문제를 해결하기 위해 개발자는 효율적인 DOM 조작을 위해 더 높은 수준의 API를 제공하는 jQuery, React 또는 Vue.js와 같은 라이브러리나 프레임워크를 사용하는 경우가 많습니다.
DOM 특성 및 유사 용어와의 비교
| 용어 | 설명 | 비교 |
|---|---|---|
| DOM | 문서의 구조적 표현을 제공하고 개발자가 문서의 내용과 시각적 표현을 조작할 수 있도록 하는 HTML 및 XML 문서용 API입니다. | |
| CSSOM | CSSOM(CSS 개체 모델)은 DOM과 유사하지만 특히 CSS용 CSS 스타일 맵입니다. DOM에 적용된 스타일시트와 스타일을 조작할 수 있습니다. | DOM이 문서 구조에 중점을 두는 반면 CSSOM은 프레젠테이션 계층에 중점을 둡니다. |
| 섀도우 DOM | 웹 구성 요소 구현을 위해 DOM 트리의 일부를 캡슐화하는 메커니즘입니다. DOM의 일부를 격리하여 기본 문서 트리에서 "숨깁니다". | 일반 DOM과 달리 Shadow DOM은 스타일과 동작 캡슐화를 제공합니다. |
DOM(문서 객체 모델)과 관련된 미래의 관점
웹 기술이 계속 발전함에 따라 DOM API도 확장되고 개선될 가능성이 높습니다. 잠재적인 향후 개발에는 DOM을 조작하는 보다 효율적인 방법, 새로운 웹 표준과의 향상된 통합, HTML 사양 자체의 지속적인 발전이 포함됩니다.
진행 중인 흥미로운 개발 중 하나는 재사용 가능하고 캡슐화된 HTML 태그를 생성할 수 있는 웹 구성 요소의 점진적인 채택입니다. 이는 DOM 요소를 캡슐화하는 방법을 제공하는 Shadow DOM과 밀접하게 연결되어 있습니다.
DOM(문서 개체 모델) 및 프록시 서버
프록시 서버는 클라이언트와 서버 간에 요청과 응답을 전달하는 중개자입니다. DOM은 주로 클라이언트 측 웹 문서의 구조 및 조작과 관련이 있지만 프록시 서버는 네트워크 수준에서 작동합니다.
그러나 프록시 서버가 웹 문서의 내용을 수정할 수 있는 시나리오에서 두 가지의 교차점을 찾을 수 있습니다. 예를 들어 프록시 서버는 웹 페이지가 클라이언트에 도달하기 전에 DOM 요소를 추가, 제거 또는 수정할 수 있습니다. 이는 스크립트 삽입, 원치 않는 요소 제거, 현지화 또는 사용자 정의 목적으로 콘텐츠 수정 등 다양한 이유로 사용될 수 있습니다.
관련된 링크들
이 개요는 DOM(문서 개체 모델), 그 기원, 작동 방식, 특성 및 진화 가능성에 대한 포괄적인 이해를 제공해야 합니다. DOM은 대화형 웹 개발의 초석으로 남아 있으며 웹 기술이 발전함에 따라 계속해서 중요한 역할을 할 것입니다.
