Document Object Model: What You Need to Know

What Is DOM (Document Object Model)?

The DOM (Document Object Model) is a W3C (World Wide Web Consortium) standard. It defines a standard for accessing documents – “The W3C Document Object Model is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.”
The W3C DOM standard is separated into 3 different parts:

  • Core – standard model for all document types
  • XML – standard model for XML documents
  • HTML – standard model for HTML documents

The DOM (Document Object Model) is an interface that represents how browser reads HTML and XML documents. It allows a language (JavaScript) to manipulate, structure, and style website. After the browser reads HTML document, it creates a representational tree called the Document Object Model and defines how that tree can be accessed.
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 represents that same document so we can manipulate it. The DOM is an object-oriented representation of the web page, which we can be modify with a scripting language such as JavaScript.

It is basically the representational tree that the browser create after it read our document. It has four important elements:

  • Document: It treats all the HTML documents.
  • Elements: All the tags that are inside your HTML or XML turn into a DOM element.
  • Text: All the tags’ content.
  • Attributes: All the attributes from a specific HTML element. In the image, the attribute class=”hero” is an attribute from the element.

Wait, DHTML?

To find out concept of DOM element it is essential to understand concept of Dynamic HTML and DOM. When all stockholders enhanced requirements of web pages; they wanted the Web pages that can be more interactive, dynamic and lively. In addition, to reach this objective, developers required the tools and mechanisms that enables them to modify and manipulate the presentation and content of each section of web page. Therefore the concept of Dynamic HTML is created. Wikipedia defines DHTML as below –

Dynamic HTML, or DHTML, is an umbrella term for a collection of technologies used together to create interactive and animated websites by using a combination of a static markup language (such as HTML), a client-side scripting language (such as JavaScript), a presentation definition language (such as CSS), and the Document Object Model (DOM).

So, writing standard DHTML web pages are standardised in three fields, including client-side scripting language (such as JavaScript), a presentation definition language (such as CSS) and uniform programming interface(API) to access and modify the Web page (Document Object Model). W3C and others performs this activity. Also to solve the problem of cross browser, W3C tried to reach a general consensus (with different browser vendors) about scripts to access and manipulate HTML and XML documents via Document Object Model (DOM) as a standard application programming interface (API).

How DOM comes into the equation?

But the main question is that how have they designed the structure of Document Object Model to meet their needs? Their solution was simple but wonderful. They used a hierarchical structure such as tree which at the root of the tree we can find document object, also each node is equivalent of a HTML elements (DOM element). This abstraction of our web page give us a great facility to access any HTML element and style sheets.

Manipulating the Document Object Model

Different browsers have different implementations of the DOM, and these implementations exhibit varying degrees of conformance to the actual DOM standard, but every web browser uses some document object model in HTML to make web pages accessible via JavaScript.

When we create a script–whether it’s inline in a <script> element or included in the web page by means of a script loading instruction – we can immediately begin using the API for the document or window elements to manipulate the document itself or to get at the children of that document, which are the various elements in the web page. Our DOM programming may be something as simple as displaying an alert message by using the alert() function from the window object, or it may use more sophisticated DOM methods to actually create new content.

Methods

The DOM has a lot of methods. They are the connection between our nodes (elements) and events. Some of the most important methods are –

  • getElementById()
  • getElementsByClassName()
  • getElementsByTagName()
  • querySelector()
  • querySelectorAll()

Events

The DOM elements have methods, as we just discussed, but they also have events. These events are responsible for making interactivity possible in our page and they are also methods. For example –
– click
– select

Traversing

We can traverse the DOM and use some properties. With these properties, you can return elements, comments, text, and so on. Some examples are –

  • .childNodes
  • .firstChild
  • .nodeName
  • .nodeValue
  • .nodeType

In the beginning, JavaScript and the DOM were tightly intertwined, but eventually, they evolved into separate entities. The page content is stored in the DOM and may be accessed and manipulated via JavaScript, so that we may write this approximative equation:

API = DOM + JavaScript

The DOM was designed to be independent of any particular programming language, making the structural representation of the document available from a single, consistent API.

DOMs Simplified

The browser has an understanding of the current state of the document. We can call this the DOM. Alternately we can call the DOM the standard interfaces that it exposes that allow us to query and modify the state of the document.
There are two parts to DOM Level 1 specification –
Core and HTML.

The Core DOM specification describes a general DOM that could be used to represent any structured document. The HTML DOM specification describes – how to use the Core DOM to specifically describe HTML documents and includes HTML-specific interfaces.

Most browsers implements the DOM in a lower-level language like C, and the browser supplies bindings to the JavaScript environment that can manipulate the actual representations.
Google is thinking of switching to a native JavaScript DOM implementation; likely to avoid needing both a C++ function and a duplicate JavaScript wrapper for that C++ function; possibly also for performance gains. The DOM’s IDL is language-agnostic, so that we can implement it in any language. “Writing a DOM implementation” means writing code in a particular language to conform to the IDL interfaces described in the DOM specifications.

document object model in html
document object model

What is the Difference Between the DOM and HTML Source Code?

Let’s create a very basic website. The index.html file as below –

<!DOCTYPE html>
<html lang="en">

  <head>
    <title>Learning the DOM</title>
  </head>

  <body>
    <h1>Document Object Model</h1>
  </body>

</html>

This code is the familiar HTML source of a new website skeleton.

There are two instances in which the browser-generated DOM will be different than HTML source code:

  • The DOM is modified by client-side JavaScript
  • The browser automatically fixes errors in the source code
Let’s demonstrate how the DOM can be modified by client-side JavaScript:

Let’s run the above file and type the following into the console:

document.body;

The console will respond with this output:

<body>
  <h1>Document Object Model</h1>
</body>

document is an object, body is a property of that object that we have accessed with dot notation. Submitting document.body to the console outputs the body element and everything inside of it.

In the console, we can change some of the live properties of the body object on this website. We’ll edit the style attribute, changing the background color to red. Type this into the console:

document.body.style.backgroundColor = 'red';

After typing and submitting the above code, you’ll see the live update to the site, as the background color changes.
Switching to the Elements tab, or typing document.body into the console again, we will see that the DOM has changed.

<body style="background-color: red;">
  <h1>Document Object Model</h1>
</body>

However, let’s right click on the page and select “View Page Source”. We will notice that the source of the website does not contain the new style attribute we added via JavaScript. Client side JS will not change and will never affect the source of a website. If you refresh the page, the new code we added in the console will disappear.

Automatically Fixing Errors:

The other instance in which the DOM might have a different output than HTML source code is when there are errors in the source code. One common example of this is the table tag — a tbody tag is required inside a table, but developers often fail to include it in their HTML. The browser will automatically correct the error and add the tbody, modifying the DOM. The DOM will sometime also fix tags that developers have not closed.

Summary

DOM has nothing to do with browser of JS exclusively. It is what it’s name suggest – D(ocument) OM. It manipulates document; more specifically XML document; and is a STANDARD; not a specific LANGUAGE. As we can use it also to manipulate HTML document also; browsers implement this STANDARD (usually with C++); to manipulate web pages. The HTML DOM is a standard object model and programming interface for HTML. The HTML DOM is a standard for how to get, change, add, or delete HTML elements.