Traverses the DOM

The DOM is the foundation of almost everything JavaScript work with the browser and web documents. It is the interface that allows us to interact with web-page's content, and it's essential to understand how to get around within that model. Traversing the DOM means "move through", are used to "find" HTML elements (DOM Node) based on their relation to other elements. Start with one selection and move through that selection until you reach the elements you desire. The document object is the root of every node in the DOM. DOM represents the HTML page as a tree, in much the same way you might represent your ancestry as a "family tree" . Learning how to navigate up and down the DOM tree and move from branch to branch is essential to understanding how to work with JavaScript and HTML. The root object in tree structure is the document object, which can have parents, children, and siblings and this determines by its position in the tree structure. Each element in the tree structure is called a Node.
<!DOCTYPE html> <html> <head> <title>The DOM</title> </head> <body> <h1>Document Object Model</h1> <p id="pr">Test Paragraph</p> </body> </html>

Javascript dom

DOM Nodes

Each node in the DOM tree is an object representing a single element on the page. Nodes understand their relationship to other nodes in their immediate vicinity , and contain a good deal of information about themselves. The parent of any node is the node that is one level above it, or closer to the document in the DOM hierarchy .The children of a node are the nodes that are one level below it. The siblings of a node are any node on the same tree level in the DOM. All properties, except childNodes, contain a reference to another node object. The childNodes property contains a reference to an array of nodes. There are several standard methods one can use to select one or more nodes from an HTML document. The three most popular are:
  1. getElementById
  2. getElementsByClassName
  3. getElementsByTagName
example
<!DOCTYPE html> <html> <body> <p>Days:</p> <ul id="days"> <li id="col1">Sunday</li> <li id="col2">Monday</li> <li id="col3">Tuesday</li> <li id="col3">Wednesday</li> </ul> <button onclick="findDay()">Try it</button> <script> function findDay() { var fChild = document.getElementById("days").childNodes[1].innerHTML; alert("First Child :" + fChild); } </script> </body> </html>
run this source code Browser View

Days:

  • Sunday
  • Monday
  • Tuesday
  • Wednesday


The child Nodes returns a collection of a node's child nodes and the length property to determine the number of child nodes. You can loop through all child nodes for retrieving the information of child nodes.
<!DOCTYPE html> <html> <body> <p>Days:</p> <ul id="days"> <li id="col1">Sunday</li> <li id="col2">Monday</li> <li id="col3">Tuesday</li> <li id="col3">Wednesday</li> </ul> <button onclick="findElements()">Try it</button> <script> function findElements() { var childNodes = document.body.childNodes; for(var i=0; i<=childNodes.length; i++) { alert(childNodes[i].innerHTML) } } </script> </body> </html>
run this source code Browser View

Days:

  • Sunday
  • Monday
  • Tuesday
  • Wednesday