We know how to write HTML and style it with CSS. But what if we want to do more with the content in our pages, such as adding or deleting elements or modifying them? It's time to move on to interactivity, and understanding the Document Object Model, or DOM, will give us the bridge to get there.
To see the DOM in action, let's take a look at the HTML that constructs every website we visit.
NOTE: We recommend that you use Google Chrome. (You can download chrome here). Because Chrome has several developer-friendly features, it's a preferred development tool.
In a Google Chrome browser, go to the URL
https://learn.co/tracks/welcome-to-learn-verified. To see the HTML of that
view-source: to the front of the URL. The complete final URL will be
By using the
view-source URL prefix, all the page's source HTML will be
revealed to you. It will look something like this:
Notice that what we see in our the
view-source tab looks very similar to HTML
you may have seen previously.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="style.css"> </head> <body> <header>....</header> <img id="kitten" class="" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120"> </body> <script src="https://raw.githubusercontent.com/learn-co-curriculum/js-and-the-web/master/spin.js" charset="utf-8"></script> </html>
It may look like our browser is displaying the HTML that we see, but it is not. Instead, our browser is displaying the Document Object Model of the respective web page.
The best way to understand the Document Object Model is to interact with it. Let's practice.
You can open the developer console by opening the context menu (click while
ctrl on Mac) and choosing
Alternatively, from this web page, look at the Chrome menubar at the top of the page. Click on "More tools", then select ""Developer Tools". This will open the Google Developer Console.
When you open the Google Developer Console, you will see what looks like HTML.
There are head tags, body tags, divs, etc. Now from inside the developer
console, click on the element that says
header, and then press the delete
button on your keyboard. You should see the header at the top turn white. You
just deleted it!
Now did you just delete the HTML? No. Let's prove it.
View the page source. Right click (or two fingers click on the mac) on the lesson page in the browser and select view page source. You will see the that the HTML is just as it always was, with a header tag and lots of other elements inside.
The changes that the developer console caused, and the changes the developer console currently displays are changes in the Document Object Model, but not in our HTML. Our webpage now looks blank, reflecting the missing header in our DOM, even though our HTML still has content in the header tags.
So we can conclude that by changing the Document Object Model, we can change the way our web page displays. And we can do this even if our HTML is unchanged. The HTML is essentially the starting point of the page's content. But as we just saw by deleting the header of the page, what is displayed can change. When we change it, we change the Document Object Model, and that changes the appearance in the browser. The HTML, however, once loaded on a webpage, does not change.
Let's get to it.
From inside the developer console, click on the tab that says the word
"console." At the bottom you will see a cursor. There, type the word
and press "Enter.""
You'll get a
#document returned. Click the triangle and you'll see the DOM. If
you followed along above, you'll see a
head tag, but no
header tag. So by
document it looks like our header is gone. However, if we view page
source, the HTML is unchanged. Remember, this is the difference between the DOM
(current representation of the page) and the HTML (the initial representation of
This will return something like this:
<header class="site- header">...</header>. Go ahead and click on that display triangle to see more.
It retrieves the header tag, which contains the lesson title among other things. OK, now let's do something with this header. Open up the console, and type in the following:
Take a look at the top of the page again. The header is gone. But do you think the HTML has just changed? Well, no. As you know, the HTML never changes after it is first rendered. Instead, we accessed the Document Object Model, which altered the model and that altered the appearance of our web page. This is the same as we did before, but with code. To get the header back, just hit refresh.