Introducing - the DOM

 

No, not that one...

This one!

If you are into UI automation like myself, then you probably heard about this DOM thingy everyone is talking about, right?

Well, In this article we are going to take a slightly deeper look into what is known as the Document Object Model.

A quick introduction

Quite often we address the DOM in terms of the page source of our AUT (Application under test). But, DOM is actually a language -independant interface for treating XML and HTML documents. That Interface offers the document as a tree of objects.

Well, we are into the Test-Automation stuff, so let's stick to the HTML part.

In the WEB world, the DOM would be referred to as the browsers programatic representation of the web page. An API if you will, for dealing with and manipulating the HTML without actually going in and changing it manually. The interface specification is standartized by the W3C.

Using this API we can build, navigate through, add or modify a document and its content. For example, when we load a webpage in our browser, what happens "behind the scenes", is that the browser is taking our HTML and converting it to the DOM. From that point on, what we see in our browser is based on the DOM besides our original source code. Any Javascript code you would write, will interact with the DOM as an API for the HTML.

A common usage example of accessing and manipulating the DOM with Javascript would be using these vanilla Javascript methods.

Let's dive deeper...

In the document object model, everything is assembled from "nodes". These nodes are objects that have properties, and they have a structure of a tree.

The node objects are divided into types. There are several types, but for now let's stick to these 4:

Document - Which represents the HTML document itself.

DocumentType - Which in our case is HTML.

Element - Probably the most common node type which represents the HTML elements of the page.

Text - Text nodes are text values that are often found inside of HTML tags or as attributes.

So let's take a look at how a basic HTML document will map into a node tree:

Now let's illustrate it as a DOM tree:

So, as you can see above, the structure of the model does not correspond with the structure of the HTML document. 

- The first node is the document itself.

- Next, we have the document type followed by the Root node which is the HTML tag. 

- As for the document object model the opening and closing tags are a single node. 

- The text that is placed inside of the HTML tags is a separate node. 

- As I said before, the text and the tags are different types of nodes, and their hierarchy is logically mapped in the tree.

- The text nodes are a "child node" in the tree context.

I hope you had fun reading this post, see you in the next one.