Traversing The DOM. Understanding HTML family Tree (part two)

Hey. Remember how we talked about the Html DOM as been structured like a family tree and how we can get a starting point and transverse the Html Dom using selectors and combinators in CSS?. If you don't remember, kindly check out the part one of this post. I also included some references to CSS selectors there.

In this article, we would be looking at how to transverse the DOM using javascript.

In part one of Tranversing the dom, we looked at the Html family tree using the code below.

To take this further, just like members of a human family tree are persons, the members of the Html family tree are Nodes.. There are four commonly used Node types namely;

document - The entry point into the DOM,

element nodes - These are Html tags such as span, div, e.t.c,

text nodes - These are the text you have between your Html tags,

comment nodes - This helps in placing information in our Html codes. Although it does not appear in the browser, it is accessible via Javascript

These Nodes are objects, (This means they have properties and methods) and we can access their properties in Javascript. For example, we can get the name of a Node by accessing the nodeName property. It is through these properties and methods on Nodes that we traverse the DOM