The Document Object Model (DOM) aims to make it easier for Javascript to access HTML and XML elements, but is that all there is to it? DOM plays a rather very important role in website performance. For example, let’s say you are visiting a website and logging into your account. After logging in, you will be greeted by the website, for example, ‘Hello ’ along with your username, profile picture, etc. The changes to the website are solely for you. If you log out of your account, the website will return to normal. This means the changes you made on the client-side of the website only appear on the client-side, and no significant changes are made to the original website.

What is DOM (Document Object Model)?

A DOM, or Document Object Model, acts as a translator between Javascript and HTML. It’s not a different programming language but a built-in API for Javascript.

You’re undoubtedly aware that a web page results from several programming languages, codes, and developers working together. As a result, myriads of code lines, frameworks, APIs, and other elements are required for a website to run smoothly and without performance issues. The DOM is one such critical component that plays an intuitively integral part in the dynamic functioning of web pages.

So what exactly is DOM, and why is it key in website development? This blog aims to explain what a Document Object Model is.

What is DOM Short for?

DOM is short for Document Object Model, an interface for HTML and XML documents.

If HTML is the language responsible for the website’s foundation, Javascript is the language that adds dynamic content to the website. Therefore, HTML and Javascript must work together to develop and manage a website.

However, Javascript cannot understand HTML elements, which is where DOM comes for help. The Document Object Model (DOM) turns illegible HTML and XML elements into objects, making it easier for Javascript to comprehend and access the material.

DOM is divided into three categories:

Core DOM − standard model for any structured document.
XML DOM − standard model for XML documents.
HTML DOM − standard model for HTML documents.

Structure of DOM

The structure of the DOM is of a tree or a forest. The top element of the structure represents the root node of the <html> element, and the branches represent all the other elements that come under the <html> tag.

What Does DOM Do?

The Document Object Model (DOM) aims to make it easier for Javascript to access HTML and XML elements, but is that all there is to it?

DOM plays a rather very important role in website performance. For example, let’s say you are visiting a website and logging into your account. After logging in, you will be greeted by the website, for example, ‘Hello <name>’ along with your username, profile picture, etc.

The changes to the website are solely for you. If you log out of your account, the website will return to normal.

This means the changes you made on the client-side of the website only appear on the client-side, and no significant changes are made to the original website.

This is the magic of DOM.

The majority of websites nowadays are built with the goal of enticing visitors. Therefore, interactive websites are those that are not only faster and smoother to use but also visually appealing. DOM is responsible for the motion and visual aspects one often sees on a website.

So if you change the theme of a particular website from light to dark, the changes for your display alone, not for all users visiting the website.

Accessing DOM

How can you access DOM?

You are already accessing DOM by clicking and scrolling through this page.

Let’s use an example to describe this phenomenon more clearly,

Code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Understanding the DOM</title>
  </head>
  <body>
    <h1>Hello DocumentObjectModel</h1>
  </body>
</html>

The above program is an HTML program. First, click on the browser and open the respective files to view its DOM version. Then use the chrome developer tools or right-click and select inspect to open the developer’s panel.

You will see the above HTML code version in the DOM view in the panel. There won’t be any changes, and the code will appear the same as it seems. The differences are inherent, and if you hover over the code, you will see the respective elements highlighted.

You can also make changes to the code to view the results dynamically using document objects.

Document Object

Document objects are used for developers who want to perform changes and view the changes dynamically.

Below are some of the document object methods that developers can use in changing the content of the web page dynamically.

Document Object Methods

activeElement – Returns the currently focused element in the document
addEventListener() – Adds a handler to an event in the document.
adoptNode() – Takes a node from another document and adopts it.
Body – Sets or retrieves the body of the document.
Cookie – Returns a list of all cookie names or value pairs in the document.
defaultView – Returns the document’s associated window object, or null if none exists.
designMode – Determines whether or not the entire document is editable.
Doctype – Returns the document’s associated Document Type Declaration.
getElementById() – Returns the element with the id value specified.
getElementsByName() – Returns all items with the specified name value.
getElementsByTagName() – Returns an HTMLCollection with all items that have the supplied tag name.
getElementsByClassName() – Retrieves all items that have the specified class name.
Head – Returns the document’s head element.
Images – Returns a collection of all the document’s image components.
Implementation – Returns the DOMImplementation object that is in charge of this document.
Links – Returns a collection of all <a> and <area> elements with a href attribute in the document.
open() – Collects output from a document by opening an HTML output stream.
querySelector() – Returns the first element in the document that matches a provided CSS selectors.
querySelectorAll() – Returns a static NodeList with all elements matching a query.
Title – Sets or returns the document’s title URL.

URL – Returns the HTML document’s entire URL

write() – Creates a document with HTML expressions or Javascript code.
writeln() – This function is similar to write(), but it adds a newline character after each statement.

Modifications

You can make modifications to a website using the methods listed above.

For example, if you wish to alter the website’s background colour, type the following:

document.body.style.backgroundColor = ‘red’;

Type the above code in the developer tools console and press enter to perform the changes. Likewise, developers can play around with their code and view the changes made.

You don’t have to worry about making irreversible modifications to the original code while making changes because, as previously said, the changes are just on the client-side. To prove this, right-click and select ‘see page source‘. You’ll see that any modifications you’ve made aren’t reflected in the website’s source code.

Advantages and Disadvantages of DOM

Developers widely use DOM in Javascript. To build more responsive web pages, developers can also use other programming languages. With that said, let’s look at some of the advantages and disadvantages of DOM:

Advantages:

DOM is language and platform-independent.
It is traversable, which means since the data is arranged in a neat hierarchy model, developers find it easy to locate specific information.
DOM is dynamic and customizable.
The file is parsed only once.

Disadvantages:

DOM takes up more RAM.
The operation speed is slow.

Conclusion

Through this article, you probably have got a gist of the role of DOM and how it plays a key in operating dynamic websites that perform seamlessly. By understanding DOM, developers can focus on creating more user interactive pages.

Learn free coding basics

If you’re brand new to coding, then try our free 5 Day Coding Challenge. In this short BootCamp, you will learn the basics of HTML, CSS and JavaScript. Register now through the form below. If you already know the basics, then have a look at our Full Stack Software Development programme.

What is DOM?

Author: Daragh Ó Tuama