What is DOM (Document Object Model) and why should I care?

So, what is DOM ? If you have been tinkering around with web-designing and SEO, it’s unlikely that you haven’t heard of DOM (Document Object Model). Understanding, the DOM (Document Object Model) will not just help you have more control over the structure of the webpages but will also enable you to create better Web-tools and deliver a more personalized experience to your audience.

However, before we get started I feel it’s important to let you know that to follow along you need to have some:
1. Basic understanding of HTML, CSS & JavaScripts
2. Basic understanding of Object Oriented Programming. If you aren’t too sure about Object Oriented Programming – you may check out my tutorial on Object Oriented Programming on JavaScripts.

DOM Considers a Web-page (Document) to be an Object:

In Object Oriented Programming, we first define a class and then re-use the definition in various instances of the class (which are called Objects). Sounds complicated? It’s not quite! Follow along:

Let’s time-travel back a couple of decades. Remember those letters we wrote back then? If you don’t – Don’t worry , I have the right totem for you:

Document Object Model of a traditional Document or letter
DOM (Document Object Model) of a traditional Document or letter

In the above letter, I have marked sections which can qualify to be attributes of the letter. In other words, these are universal elements that together build up the document. When I say universal, I mean that there is no ambiguity about what we can expect in these elements. For example: “Signature” will always contain name and not an address.

Webpages are nothing but documents written in HTML (Hyper Text Markup Language) scripts. These documents follow a standard structure. This structure is captured in a DOM. Consider the below HTML code:

<html>
<head></head>
<body>
<H1>Hello World</H1>
</body>
</html>

Before rendering a page a browser converts it to a DOM tree (as shown below):

The DOM Tree of the above HTML Code
The DOM Tree of the above HTML Code

You may be wondering the need to do all this. A browser should simply read and render the HTML script.

However, here’s the problem: The HTML alone doesn’t contain the entire content of the page. Some of it is in the JavaScripts as well. The DOM is created after analyzing both the HTML and JavaScripts code.

Going back to the letter example : If we had to archive these letter in a database we would need the “receivers” address as well. The “receivers” address is not in the letter but in the envelop that was used to deliver the letter. Thus, we can put together the complete information only when we combine both what’s on the letter and what’s on the envelop.

You may still be wondering why split the code between HTML and JavaScripts at all. There are quite a few reasons to do that. For example, if we want to show different content based on the user location, we would need a code to analyze the user location and then return the custom content. JavaScripts does that for us. To deliver the custom content it would need to edit the Document. This “editing” is done by manipulating the DOM.

Thanks to DOM, this JavaScripts based manipulation is possible by making use of the properties and methods associated with the document object.

Document Object Model = HTML + JavaScripts

A whole bunch of articles available online, incorrectly mention that JavaScripts can be used to update the HTML. It can’t. What JavaScripts do is update the Document Object. This Document Object is used by the browsers to deliver content.

In the early days of the internet, websites delivered content purely using HTML. Today, JavaScripts play an important role in content delivery. In fact there are site built purely on JavaScripts. The fundamental however stays the same. The browser analyzes both HTML and JavaScripts to create the Document Object Model and deliver the final content.

How DOM impacts SEO

When the content is split between JavaScripts and HTML, the browser takes more time to generate the DOM and render the final content. Browsers render a page only after analyzing all the JavaScripts along with the HTML unless explicitly told to do otherwise. As a result, the visitor ends up seeing a blank page. If the time taken is too long, there is a chance that the visitor may bounce off. A site with high bounce rate isn’t favored at all by Search Engines. That’s why Google’s page speed analyzer recommends web-masters to correct “render blocking JavaScripts“.

Search Engines however, don’t expect web-masters to stop using JavaScripts. However, Web-masters should ensure that they don’t end up showing a blank page to the visitors. There are multiple ways to do that:

  • Deliver the important information using HTML and make the JavaScripts asynchronous. This tells browsers to first create a DOM using HTML only (i.e. show visitors the basic content) and then work on updating the DOM based on it’s analysis of the JavaScripts.
  • Using a pre-render service

Search Engines earlier used HTML and not the DOM to index and rank a site. Thus information delivered via JavaScripts wasn’t available to the Search Engines. For SEO pages, it thus made sense to deliver all content through HTML. Google can now read and index JavaScripts , thus the earlier limitation can be relaxed. However, a search engine would definitely not prefer spending too much time to understand the content of a page. It makes sense to deliver the key on-page elements using HTML only.

Summary
What is DOM (Document Object Model) and why should I care?
Article Name
What is DOM (Document Object Model) and why should I care?
Description
So, what is DOM ? If you have been tinkering around with web-designing and SEO, it's unlikely that you haven't heard of DOM (Document Object Model). Understanding, the DOM (Document Object Model) will not just help you have more control over the structure of the webpages but will also enable you to create better Web-tools and deliver a more personalized experience to your audience.
Author
Publisher Name
Digital Marketing Chef
Publisher Logo

1 thought on “What is DOM (Document Object Model) and why should I care?”

Leave a Reply

Your email address will not be published. Required fields are marked *