Web Development: Unraveling HTML, CSS, and JavaScript/

...

/

Node Navigation Basics

Node Navigation Basics

In this lesson, let's see some node navigation basics.

We'll cover the following...

The concept of root nodes, parents, children, sibling nodes, text nodes, and attributes are very important because the navigation in the tree is based on these ideas.

The document tree is represented by the document JavaScript object. There are a number of document operations dedicated to navigation. The Listing below (it is based on the markup shown in Listing: The DOM tree) demonstrates a few methods of navigation.

Listing: Demonstrating methods of navigation

<!DOCTYPE html>
<html>
<head>
  <title>DOM Tree</title>
  <script>
    function logNavigation() {
      console.log('Children of the document')
      var children = document.childNodes;
      for (var i = 0; i < children.length; i++) {
        logNodeInfo(i, children[i]);
      }

      console.log('Children of <body>')
      var current = document.body.firstChild;
      var index = 0;
      while (current != null) {
        logNodeInfo(index, current);
        index++;
        current = current.nextSibling;
      }

      console.log('Children of <p>')
      children = document.getElementsByTagName('p')[0]
        .childNodes;
      for (var i = 0; i < children.length; i++) {
        logNodeInfo(i, children[i]);
      }

      console.log('Parent of <li>');
      var parent = document.getElementsByTagName('li')[0]
        .parentNode;
      logNodeInfo(0, parent);
    }

    function logNodeInfo(index, node) {
      var nodeVal = node.nodeValue == null
        ? '{empty}'
        : node.nodeValue.replace('\n', '{nl}');
      console.log('  ' + index + ': ('
        + node.nodeType + ') '
        + node.nodeName + ' | '
        + nodeVal);
    }
  </script>
</head>
<body onload="logNavigation()">
  <h1>Chapter <strong>#1</strong>: HTML Basics</h1>
  <!-- This is a comment -->
  <p class="firstPara">
    This is the first paragraph of this chapter
  </p>
  <ul>
    <li>Item #1</li>
    <li>Item #2</li>
  </ul>
</body>
</html>

The JavaScript code in this listing uses the console.log() method to add diagnostic messages to the console of the browser you use.

Using the F12 key in Google Chrome or Edge, or Ctrl+Shift+K in Firefox will show you the developer tools, where you can find the console.

When displaying the page in Listing 6-3, the console will display this output:

Children of the document
  0: (10) html | {empty}
  1: (1) HTML | {empty}
Children of <body>
  0: (3) #text | {nl}
  1: (1) H1 | {empty}
  2: (3) #text | {nl}
  3: (8) #comment |  This is a comment
  4: (3) #text | {nl}
  5: (1) P | {empty}
  6: (3) #text | {nl}
  7: (1) UL | {empty}
  8: (3) #text | {nl}
Children of <p>
  0: (3) #text | {nl}    This is the first paragraph of this chapter
Parent of <li>
  0: (1) UL | {empty}

📜NOTE: Earlier, in Exercise 6-2 you have already used the document.write() method. Because this method changes the document body itself, it would cause issues with navigating the page structure while altering it. Using console.log() avoids this potential problem.

The <script> section of the page (nested in <head>) contains only function definitions. The onload attribute of <body> is set to “logNavigation()”, so when the loading of the page has been completed, the logNavigation() method is immediately invoked; this carries out the navigation operations logged in the console output.

This method contains four chunks of operations that query the children of the document, of the <body> element, of the <p> element, and last, the parent of the <li> element, respectively. To display node details, it utilizes the ...