What is the DOM and DOM Manipulation
The browser automatically creates the DOM as soon as the HTML page loads, and it is stored in a tree structure like the below image.
On the above image, each HTML element is one object. Let's now consider the HTML document that corresponds to the above DOM tree-like structure.
<html> <head> <title>Page Title</title> </head> <body> <section> <h1>Level One Header</h1> </section> <section> <p>A paragraph <a>Google Link</a></p> </section> </body> </html>
The DOM always starts with the document object right at the very top, and
document.querySelector in the last lecture to select an element? This means that the
querySelector method is available on the
document object. That's why we say
document is the entry point of the DOM because we need it to start selecting elements.
The first child of
document is usually the html element because that's usually the root element in all HTML documents. Next,
html usually has two child elements, head, and body. In the HTML document, they are adjacent elements, so they are siblings in our DOM.
As we keep going deeper in the nested HTML structure, we keep adding more and more children to the DOM tree. So, inside
body, you have more child elements, and the two sections in the body even have more child elements themselves.
With that, we finally have all our HTML elements in the DOM tree. A DOM tree actually has more than just element nodes. It also has nodes for all text, comments, and other stuff. That's because the rule is, whatever is in the HTML document also has to be in the DOM. And so, as you can see, the DOM really is a complete representation of the HTML document so that we can manipulate it in complex ways.
Well, with all that has just been said, you should now have a good overview of how the DOM works and what it looks like.
Before we finish, it's important to clarify that the DOM and all the properties that we can use to manipulate the DOM, such as
All this happens behind the scenes. We don't have to import or do anything. There is an official DOM specification that browsers implement, which is why DOM manipulation works the same in all browsers. Besides the DOM, there are actually a ton more web APIs such as timers, the fetch API, and many more, which we will learn later. In the following lecture, we will continue on the project we started in the last lecture and put some DOM manipulation to practice.