DEV Community


DOM: Detailed Explanation of DOM.

I'm a full stack developer... I love reading and meeting new people in tech
・2 min read

DOM means Document object model. The DOM is a programming language interface for HTML and XML(Extensible markup language) documents. It defines the logical structure of documents and the way a document is accessed and manipulated.

A Web page is a document. This document can be either displayed in the browser window or as the HTML source. But it is the same document in both cases. The Document Object Model (DOM) represents that same document so it can be manipulated. The DOM is an object-oriented representation of the web page, which can be modified with a scripting language such as JavaScript.

DOM is a way to represent the web page in the structured hierarchical way so that it will become easier for programmers and users to glide through the document.

Structure of DOM:

DOM can be thought of as Tree or forest (which is more than one tree). The term structure model is sometimes used to describe the tree-like representation of a document. One important property of DOM structure models is structural isomorphism.

Why is it called Object Model?

Documents are modeled using objects, and the model includes not only the structure of a document but also the behavior of a document and the objects of which it is composed of like tag elements with attributes in HTML.

Accessing the DOM

You don't have to do anything special to begin using the DOM. Different browsers have different implementations of the DOM, and these implementations exhibit varying degrees of conformance to the actual DOM standard (a subject we try to avoid in this documentation), but every web browser uses some document object model to make web pages accessible via JavaScript.

Levels of DOM:

Level 0: Provides a low-level set of interfaces.

Level 1: DOM level 1 can be described in two parts: CORE and HTML.

CORE provides low-level interfaces that can be used to represent any structured document.

HTML provides high-level interfaces that can be used to represent HTML documents.

Level 2 : consists of six specifications: CORE2, VIEWS, EVENTS, STYLE, TRAVERSAL, and RANGE.

CORE2: extends the functionality of CORE specified by DOM level 1.

VIEWS: views allows programs to dynamically access and manipulate the content of the document.

EVENTS: Events are scripts that are either executed by the browser when the user reacts to the web page.

STYLE: allows programs to dynamically access and manipulate the content of style sheets.

TRAVERSAL: allows programs to dynamically traverse the document.

RANGE: allows programs to dynamically identify a range of content in the document.

Level 3: consists of five different specifications: CORE3, LOAD and SAVE, VALIDATION, EVENTS, and XPATH.

CORE3: extends the functionality of CORE specified by DOM level 2.

LOAD and SAVE: allows the program to dynamically load the content of the XML document into the

DOM document and save the DOM Document into an XML document by serialization.

VALIDATION: allows the program to dynamically update the content and structure of the document while ensuring the document remains valid.

EVENTS: extends the functionality of Events specified by DOM Level 2.

XPATH: XPATH is a path language that can be used to access the DOM tree.

Discussion (0)