JavaScript: Understanding Document Object Model (DOM)

Document Object Model or DOM is a programming interface for the document (HTML, Dynamic HTML or XML) which provide the ability to manipulate the elements (HTML tags and String literal) that makes up a document.

In a normal scenario, when server sends the response in the form of an HTML page, browser takes that HTML page and keeps it in memory. The responsibility of DOM is to create a hierarchy structure of HTML elements from the HTML page stored in browser’s memory.

Structure of DOM

HTML document have a hierarchical structure in which document objects are represented as a TREE. Each node of Tree represents an HTML document (tags, string text). Let us look at a small example:

Each of these nodes represents a Node object. Node object has some methods and properties to traverse these nodes in HTML document. Some of these properties are nextChild, previousChild, nextSibling, previousSibling.

In the next section, we will see how to access these property in an HTML document using JavaScript console

Accessing Node Object

Node elements can be accessed by document object. In the next example we will see how to access the node element and traverse the parent and the child node elements.

For the HTML document structure shown above, I will use document object in JavaScript console to access the Node elements

Finding out different HTML elements (Nodes)

Find out how many Head nodes we have in out HTML document

Accessing Head Node

and the answer is

Number of Head Nodes

Similarly, let’s find out how many paragraph elements we have in out HTML document

Accessing paragraph element

and number of paragraph elements are:

Number of paragraph elements

Traversing DOM Nodes

In this section we will see how to traverse through Parent and Child nodes and Siblings as well. We have 2 paragraph elements in this HTML document. Let us try accessing the first paragraph element and then traverse to its sibling element.

Traversing Nodes

The above alert statement will give the following output

Identifying paragraph element

Now traversing to the Next Sibling of first paragraph element

Next Sibling of Paragraph Element

and this time alert will give the following output

Accessing Next Sibling

Similarly, we can access previousSibling, previousElementSibling to access the previous sibling nodes.