DOM

"Document Object Model"의 약자입니다.

DOM은 웹 페이지XML 문서의 콘텐츠에 액세스하고 수정하기 위한 프로그래밍 인터페이스입니다. DOM은 문서의 논리적 구조를 정의하며, 각 가지 노드가 개별 요소를 나타내는 트리처럼 문서를 처리합니다. 프로그램스크립트는 DOM에 액세스하여 문서의 구조, 콘텐츠, 스타일을 읽고 수정할 수 있습니다.

DOM은 "노드"라는 객체의 계층 구조로 HTML 및 XML 파일의 구조를 정리합니다. 가장 위에는 문서 전체를 나타내는 Document 노드가 있습니다. 그다음에는 개별 HTML 또는 XML 태그를 나타내는 Element 노드가 있습니다. Element 노드는 서로 중첩되는 방식으로 계층 구조를 이룹니다. 예를 들어 <html> 노드는 문서의 루트에 가장 가깝고 <head><body> 노드를 모두 포함합니다. 그리고 이 노드들은 각각 <div><p> 요소와 같은 자식 노드를 포함합니다.

DOM의 각 요소 노드에는 해당 요소의 속성을 수정하는 여러 Attribute 노드가 포함됩니다. 예를 들어 <img> 요소 노드에는 src, alt, width, height에 대한 Attribute 노드가 포함될 수 있으며, 이를 통해 일부 JavaScript 코드가 이러한 속성을 수정할 수 있습니다. 마지막으로 Text 노드는 각 요소 안의 텍스트를 포함하여 문서의 콘텐츠를 구성합니다. Text 노드는 트리의 이며, 그 아래에 더 이상의 계층이 없습니다.

여러 요소와 요소 간의 관계를 보여 주는 DOM 계층 구조
여러 요소와 요소 간의 관계를 보여 주는 DOM 계층 구조

JavaScript(또는 다른 스크립팅 언어)를 사용하여 페이지의 DOM에 액세스하면 동적이고 상호 작용할 수 있는 웹 페이지를 만들 수 있습니다. 예를 들어 노드에 연결된 이벤트 처리기는 마우스 클릭이나 키보드 입력과 같은 사용자 상호 작용을 기다린 다음 그에 따라 페이지 콘텐츠를 수정할 수 있습니다. JavaScript 이벤트는 DOM을 사용하여 기존 노드를 제거하고 새 노드를 추가할 수 있습니다. 스크립트는 서버데이터베이스에서 데이터를 가져온 다음 DOM을 사용하여 해당 데이터를 특정 텍스트 요소에 삽입할 수 있습니다. 또한 스크립트는 DOM을 사용하여 요소의 CSS 속성을 수정하고 문서의 모양과 레이아웃을 변경할 수 있습니다.

업데이트됨 June 22, 2023 작성: Brian P.

quiz지식 테스트하기

What type of network is the Internet?

A
PAN
0%
B
CAN
0%
C
LAN
0%
D
WAN
0%
Correct! Incorrect!     View the WAN definition.
More Quizzes →

Tech Terms 컴퓨터 사전

이 페이지의 DOM에 대한 정의는 TechTerms.com의 저자가 작성한 원본 정의입니다. 이 페이지를 참조하거나 이 정의를 인용하려면 정의 바로 아래에 있는 녹색 인용 표시줄을 사용하세요.

저희의 목표는 컴퓨터 용어를 이해하기 쉬운 방식으로 설명하는 것입니다. 게시하는 모든 정의에서 정확성과 간결함을 추구합니다. 이 정의에 대한 피드백이 있거나 새로운 기술 용어를 제안하고 싶으시면 문의해 주세요.

Tech Terms 뉴스레터

매일 또는 매주 발행되는 뉴스레터로 기술 지식을 향상시키세요! 지금 구독하고 새로운 용어와 퀴즈를 이메일로 받아보세요.

무료 TechTerms 뉴스레터 구독하기

이메일을 얼마나 자주 받고 싶으신가요?

각 이메일에 포함된 링크를 통해 언제든지 구독을 취소하거나 수신 빈도를 변경할 수 있습니다. 질문이 있으신가요? 문의해 주세요.

참고: 뉴스레터는 영어로 발송됩니다.