Objective

Create a Node instance method to count all the nodes under a given node, including itself.

Difficulty

Easy

Description

Suppose we have the following configuration of the DOM tree for a particular document:

A detailed DOM tree representation.
A detailed DOM tree representation.

We've seen this figure before in the HTML DOM — Basics chapter, but for a different reason. There we studied it to understand the idea of a DOM tree, that's created internally by the browser after parsing a given document.

Now, we're interested in figuring out the total number of nodes under a given node, including itself.

The idea is really simple — we can just count the number of boxes in the figure originating from a given box to get our answer.

So talking about the root document node, there are a total of 23 nodes under it, including itself. Right?

This is the node count of the document node.

Similarly, if we were to repeat this exact same process, but replacing document with <body>, we'd get 12. Or replacing it with <head>, we'd get 7. Or with <p>, we'd get 2. Or with the comment node, we'd simply get 1.

In short, the node count of the a given node is the sum of the node counts of each of its children nodes, plus 1 (for itself).

In this exercise, you have to define a getNodeCount() instance method on the Node interface that returns back the node's node count, as detailed above.

Shown below are a couple of examples, for the following HTML document whose DOM tree is shown in the figure above:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>Learning the DOM</title>
</head>
<body>
   <!--A simple comment-->
   <h1>Learning the <b>DOM</b></h1>
   <p>The DOM is simple.</p>
</body>
</html>
// Assuming that the getNodeCount() method has been defined.
undefined
document.getNodeCount()
23
document.body.getNodeCount()
12
document.head.getNodeCount()
7
document.body.children[1].getNodeCount() // <p> element
2
document.body.childNodes[1].getNodeCount() // The comment
1
View Solution

New file

Inside the directory you created for this course on JavaScript, create a new folder called Exercise-39-Node-Count and put the .html solution files for this exercise within it.

Solution

As difficult as this exercise may sound, the solution to it is absolutely rudimentary.

The exercise's description already contains the solution in itself. That is, the node count of a given node is the node count of each of its children, plus 1.

Got any clues on what exactly does this definition mean? Well, it means recursion.

We define getNodeCount() in terms of itself. If the node has childNodes, we iterate over each one of them, call getNodeCount() on it, and then add back the result (of getNodeCount() on the child node) to an accumulator variable.

Otherwise, if the node has no child nodes, count() simply returns 1 immediately. This is the base case of the recursion.

Altogether, we get to the following code:

Node.prototype.getNodeCount = function() {
   if (this.childNodes.length !== 0) {
      var count = 1;
      for (var i = 0, len = this.childNodes.length; i < len; i++) {
         count += this.childNodes[i].getNodeCount();
      }
      return count;
   }
   return 1;
}

Let's try this:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>Learning the DOM</title>
</head>
<body>
   <!--A simple comment-->
   <h1>Learning the <b>DOM</b></h1>
   <p>The DOM is simple.</p>
</body>
</html>
// Assuming that the getNodeCount() method has been defined.
undefined
document.getNodeCount()
23
document.body.getNodeCount()
12
document.head.getNodeCount()
7
document.body.children[1].getNodeCount() // <p> element
2
document.body.childNodes[1].getNodeCount() // The comment
1

Voila! It works just as expected.