Objective
Create a Node
instance method to count all the nodes under a given node, including itself.
Difficulty
Description
Suppose we have the following configuration of the DOM tree for a particular document:

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.
document.getNodeCount()
document.body.getNodeCount()
document.head.getNodeCount()
document.body.children[1].getNodeCount() // <p> element
document.body.childNodes[1].getNodeCount() // The comment
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.
document.getNodeCount()
document.body.getNodeCount()
document.head.getNodeCount()
document.body.children[1].getNodeCount() // <p> element
document.body.childNodes[1].getNodeCount() // The comment
Voila! It works just as expected.