시작하기 전에 먼저 말씀드리고 싶은 것이 있습니다. DOM은 매우 이해하기 쉽지만, 모두가 말하는 내용이 너무 공식적이어서 이해하기 어렵습니다. DOM에 대한 이해를 심화하고 DOM에 대한 포괄적인 이해를 얻으세요.
DOM이란
DOM의 전체 이름은 Document Object Model입니다. 이는 스크립트가 웹 페이지, 창 및 문서를 제어할 수 있게 해주는 문서 객체 모델입니다.
DOM이 없다면 JavaScript는 DOM이 있는 또 다른 스크립팅 언어가 될 것이며 동적 페이지를 생성하는 강력한 도구가 될 것입니다. DOM은 JavaScript 언어의 일부가 아니라 브라우저에 내장된 애플리케이션 프로그래밍 인터페이스입니다. 물론 HTML과 XML 문서를 위한 프로그래밍 인터페이스로 간단히 이해할 수 있습니다. 문서의 구조화된 표현을 제공하고 문서의 내용과 표현을 변경할 수 있습니다.
DOM(Document Object Model)은 스크립트가 구조화된 문서와 상호 작용하고 액세스하는 방법을 설명하는 데 사용되는 웹 표준 세트입니다. 그 기능은 브라우저가 지원하는 문서(HTML XML XHTML 포함)를 객체로 구문 분석하는 것입니다. DOM은 실제로 문서에 포함된 콘텐츠를 조작하기 위한 프로그래밍 API로, 개발자가 문서에서 데이터를 읽고, 검색하고, 수정하고, 추가하고 삭제할 수 있습니다. DOM은 플랫폼과 언어에 독립적입니다. 즉, DOM을 지원하는 플랫폼과 프로그래밍 언어라면 이를 사용하여 문서를 작성할 수 있습니다.
DOM은 문서의 콘텐츠, 구조, 스타일 및 동작에 액세스하고, 조작하고, 생성하기 위한 일련의 개체, 메서드 및 속성을 정의합니다. 각 웹 페이지 요소(HTML 태그)는 객체(소위 "객체"라고 불리는 객체, 구어체 용어로는 "사물"을 의미함)에 해당합니다. 웹 페이지의 태그는 레이어별로 중첩되어 있으며 가장 바깥쪽 레이어는 입니다. 문서 개체 모델도 레이어별로 중첩되어 있지만 일반적으로 나무 모양으로 이해됩니다. 트리의 루트는 창 또는 문서 개체로, 가장 바깥쪽 레이블의 주변, 즉 전체 문서에 해당합니다. 나무의 뿌리 아래(나무는 일반적으로 유전적 가계도나 가계도처럼 거꾸로 그려집니다. 뿌리는 유일한 공통 조상입니다)에는 다음과 같은 자체 하위 개체도 있는 하위 수준 개체가 있습니다. 루트 객체를 제외한 모든 객체는 자신의 상위 객체를 가지며, 동일한 객체의 하위 객체 간의 관계는 형제애입니다. 가계도를 본 적이 없다면 회사의 조직 구조를 알아야 합니다. 
DOM은 실제로 객체지향 방식으로 기술된 문서 모델입니다. DOM은 문서를 표현하고 수정하는 데 필요한 개체, 이러한 개체의 동작 및 속성, 이러한 개체 간의 관계를 정의합니다. DOM은 페이지의 데이터와 구조를 트리로 표현한 것이라고 생각할 수 있지만, 물론 페이지가 그러한 트리 형태로 구현되지 않을 수도 있습니다. JavaScript를 사용하면 전체 HTML 문서를 재구성할 수 있습니다. 페이지의 항목을 추가, 제거, 변경 또는 재정렬할 수 있습니다.
페이지의 내용을 변경하려면 JavaScript가 HTML 문서의 모든 요소에 액세스할 수 있어야 합니다. HTML 요소를 추가, 이동, 변경 또는 제거하기 위한 메서드 및 속성과 함께 이 항목은 DOM(문서 개체 모델)을 통해 가져옵니다.
DOM 및 JavaScript
JavaScript를 사용하여 웹페이지에서 수행하는 모든 작업은 DOM을 통해 수행됩니다. DOM의 객체에 어떻게 접근하나요?
첫 번째는 상위 개체의 이름이고 그 뒤에 점으로 구분된 하위 개체의 이름이 옵니다.
