Methods that facilitate Javascript Traversing DOM Elements are introduced in this tutorial. First of all a html5 document. On line 8 is a ‘div’ element with the id of ‘container’. In-between the script tags on line 10 the ‘document.documentElement‘ method is passed to the ‘console.log‘ function.

Opening the browser console in the development tools reveals the root element in the DOM. It looks like this.

Javascript Traversing DOM Elements. A pair of html tags.
The root element of the DOM.

Child elements of the DOM are revealed by clicking open the arrow adjacent to the ‘html’ element.

The 'html' root element and two child elements. The 'head' child element and the body child element.
The ‘html’ root element and two child elements. The ‘head’ child element and the body child element.

Child elements of the ‘head’ element are revealed by clicking open the arrow adjacent to the ‘head’ tags.

Javascript Traversing DOM Elements.
The ‘head’ element with two child elements. The ‘meta’ child element and the ‘title’ child element.

In addition the child elements of the ‘body’ element are revealed by clicking open the arrow adjacent to the ‘body’ tags.

Javascript Traversing DOM Elements.
The body element has two child elements. The ‘div’ child element and the ‘script’ child element.

Therefore with all the arrows clicked the entire DOM is revealed.

Javascript Traversing DOM Elements.
The entire DOM with the ‘html’ root element enclosing a ‘head’ child element and a ‘body’ child element. The ‘head’ element also encloses two child elements as does the ‘body’ element.

Another method that facilitates javascript traversing DOM elements is (‘document.childNodes‘). In the html5 document below on line 10 the ‘document.childNodes’ method is passed to the console.log function.

And it returns a nodeList! The nodeList contains two items.

Javascript Traversing DOM Elements
A nodeList containing (2) items.

The nodeList is an object and the two items are indexed from zero. The first item is ‘0’ and the second item is ‘1’.

Javascript Traversing DOM Elements. A nodeList.
The ‘0’ index is the ‘doctype’ element and the ‘1’ index is the ‘html’ element.

Clicking in the arrow adjacent to the ‘1’ index ‘html’ element reveals two child elements. The ‘html’ element is the root element.The ‘head’ element is the firstChild to the ‘root’ and the ‘body’ element is the secondChild to the ‘root’.

Javascript Traversing DOM Elements.
The ‘html element is the root element. The ‘head’ and ‘body’ elements are children of the ‘root’ element.

After clicking the arrows adjacent to the ‘head’ and ‘body’ elements the entire DOM is revealed.

Javascript Traversing DOM Elements.
The entire DOM.

Lets apply the ‘childNodes’ to the root element instead. In the example below on line 10 a variable with the name ‘rootElement’ is given the value returned from ‘document.documentElement’. Next on line 11 the ‘rootElement’ variable is chained to ‘childNodes’ and passed to the ‘console.log’ function to output the result.

The output is a nodeList array object with ‘3’ items.

Javascript Traversing DOM Elements. A nodeList.
A nodeList array object with ‘3’ items.

The ‘#text’ item is a text node and can be removed by simply moving the opening ‘<body> tag from line 7 to be alongside the closing ‘<head> on line 6

Javascript Traversing DOM Elements. A nodeList.
The nodeList returned now has only two items. The ‘#text’ node is now absent.

The two items are once more the ‘head’ child element and ‘body’ child element.

Javascript Traversing DOM Elements.
A nodeList with two items. A ‘head’ childNode and a ‘body’ childNode.

Finally by clicking open all the arrows the entire DOM (Document Model Object) is revealed.

Javascript Traversing DOM Elements. A nodeList.
The entire DOM can be found within the nodeList. The childNodes returned a collection of nodes from ‘document.element’.

It is important to understand the DOM (Document Model Object) as javascript can manipulate the elements that belong to the DOM.


More on Javascript

Javascript logo.

Share!Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on PinterestShare on RedditShare on Tumblr

Leave a Reply

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