...

/

Feature #1: Traversing DOM Tree

Feature #1: Traversing DOM Tree

Description

First, we need to figure out a way to traverse the DOM structure that we obtain from a single web page. The HTML can be represented in a tree structure where the children of the HTML tag become the children of a node in the tree. Each level of the tree can have any number of nodes depending upon the number of nested HTML tags. We need to traverse the nodes in the tree level by level, starting at the root node.

<body>

  <nav>

    <a>About</a>

  </nav>

  <p>Paragraph</p>

</body>
DOM Tree
DOM Tree

We’ll be provided with a root node of an n-ary tree. The root node in our case will be the body tag. This root node will have the complete web page nested within its children. We have to return the values of each levels’ nodes from left to right in separate subarrays. This way we can separately analyze their content for further data processing.

Let’s try to understand this better with an illustration:

Solution

Since we need to traverse all the nodes of each level before ...

Create a free account to view this lesson.

By signing up, you agree to Educative's Terms of Service and Privacy Policy