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:
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:
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):
You may be wondering the need to do all this. A browser should simply read and render the HTML script.
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.
How DOM impacts SEO
- Using a pre-render service