The DOM – BASIC CONCEPTS

What is the DOM?

The DOM (Document Object Model) provides an interface between JavaScript and HTML. It can be used with other types of documents such as XML. When a browser loads am HTML document, it will internally represent it with the DOM, best visualized as a tree graph.

Lets start with this simple example of an HTML page and what it displays!

Now in its internal memory it represents the html page with the DOM similar to this image below, which is not entirely accurate, because we haven’t included the white space nodes.

eBay Electronics: Best tech for way less - Up to 50% off and free shipping

Now in data science, this is called a tree structure or a tree graph, which looks like an upside down tree with branches. Each point on the graph is called a node. It starts with a single node. In the html DOM’s case that node is the html element, which we call the root node. The root node branches off into one or more nodes, which themselves can branch out into one or more nodes. We can refer to sections of the adam ad branches.

This example below, we can refer to as the head branch.

We can refer to the node’s relationships as parent, child, and sibling nodes. So we can say the html node has two child nodes. Head and body. HTML is the parent node of head and body

Likewise the head node is the parent of the title node and the title node is the child of the head node.

We call nodes that have the same parent siblings. So head and body are sibling nodes and share parent HTML. And <h1> and <p> are sibling nodes and share parent body. Notice that each HTML element is represented with a node and so is a text content, which are called text nodes.

Now let’s look at this example which is using table data and see how it shows in the browser.

If we were to look at the DOM structure for just the table branch, it would look like this. Notice again all the text inside the table data cells each have their own text node.

Let’s look at one more examples with text nodes. Notice it has elements with ID attributes now.

.

In the DOM, the attributes are part of each one’s respective node. Attributes are not given their own node. Notice that the text node world is a child node of the body element. It’s not nested inside either of the paragraph elements, so it’s a sibling node of the paragraph elements instead of a child as the other text nodes are. So text nodes can be siblings to html nodes, not only their children. However text nodes do not have child nodes of their own. There’s no way to nest anything else inside a text node, the same is true of void elements, such as the <br /> element that we see in the example below. Void elements cannot have any content inside them. So the <br> element can be a child or a sibling node to other nodes, but it cannot be a parent to a child node.

WHITESPACE NODES

White space nodes can be troublesome if you are not aware of them. Here is some basic HTML and what it looks like in the browser.

You would think that the DOM representation of the body branch for this document would look like this, but it is not because of the white space node problem. It is actually incomplete

The actual DOM representation of this body branch looks like this below. The white space that you can see in the source code, which isn’t shown in the browser become text nodes that are called white space nodes. This includes line breaks, tabs, any spaces that are not a part of the other text content. So in this case in the html that you see on the left, there’s a line break after the body element and another line break after the <p> element, even though these line breaks are not shown by the browser in the user display. In the DOM both generate white space nodes. The space between hello and world, does not count as a white space node, because it’s part of the hello world string.

If the our code was written like this, the body branch would no longer have the white space nodes and it’s DOM representation would look like this. When writing JavaScript and in interacting with the DOM, you need to be aware that the white space nodes exist otherwise you may run into errors.