The DOM
The DOM is actually not very complicated to understand. It is a way of displaying the structure of an HTML document as a logical tree. This is possible because of the very important rule that inner elements need to be closed before outer elements get closed.
Here is an HTML snippet:
<html>
<head>
<title>Tab in the browser</title>
</head>
<body>
<h1>DOM</h1>
<div>
<p>Hello web!</p>
<a href="https://google.com">Here's a link!</a>
</div>
</body>
</html>
And here is how we can translate it to a tree:
Figure 9.7: Tree structure of the DOM of a very basic web page
As you can see, the most outer element, html, is at the top of the tree. The next levels, head and body, are its children. head has only one child: title. body has two children: h1 and div. And div has two children: p and a. These are typically used...
