Basic DOM traversing
We can traverse the DOM using the document
object that we saw in the previous chapter. This document object contains all the HTML and is a representation of the web page. Traversing over these elements can get you to the element you need in order to manipulate it.
This is not the most common way to do it, but this will help understand how it works later. And sometimes, you might actually find yourself needing these techniques as well. Just don't panic: there are other ways to do it, and they will be revealed in this chapter!
Even for a simple HTML piece there are already multiple ways to traverse the DOM. Let's go hunting for treasure in our DOM. We start with this little HTML snippet:
<!DOCTYPE html>
<html>
<body>
<h1>Let's find the treasure</h1>
<div id="forest">
<div id="tree1">
<div id="squirrel"></div>
<div id=...