- Explain what the DOM is
- Explain how the DOM came to be
- Select DOM elements
Back to our HTML
In this lesson, we will discuss the difference between HTML and something new: the Document Object Model. Now, we can see the HTML that constructs any website we visit. Let's learn how we can see the HTML of any site.
Note: We recommend that you use Google Chrome. (You can download chrome here). Chrome has many features that are developer friendly, and because of that, it is one of the tools that many developers use.
Change the url of your website to view source
Here's how you do it. From a Google chrome browser, go to the url of a webpage. We are going to the page
view-source: to the front of the url. So we are changing our url to
If you examine this tab, you will see the HTML used to construct the page you were viewing. 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.
<link rel="stylesheet" href="style.css">
<img id="kitten" class="" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120">
<script src="https://raw.githubusercontent.com/learn-co-curriculum/js-and-the-web/master/spin.js" charset="utf-8"></script>
It may look like our browser is simply displaying the HTML that we see, but it is not. Instead, our browser is directly displaying the Document Object Model of the respective webpage. What does that mean? What is the Document Object Model, and how is it different than the HTML for the page?
So then what is the Document Object Model
The best way to describe the Document Object Model, is to see and interact with it. Let's get to it.
1. Open the console
From this webpage, look at the Chrome menubar at the top of the page. Click on "View", then select "Developer", then "Developer Tools". This will open the Google Developer Console.
2. Manipulate the DOM
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 (which we still didn't explain), 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 what are we concluding? We're concluding that by changing the Document Object Model, we can change the way our webpage displays. And we can do this even if our HTML is unchanged.
Tell it to me in bullet points
- The Document Object Model is a representation of the current view of the browser, and can be manipulated without reloading a page.
- The HTML is the text in a file first used to display the page.
So 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. Then at the bottom you will see a cursor.
There, type the word
document 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 typing in
document it looks like our header is gone. The page displays our header as 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 the page).
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, 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
We learned a lot in this section. This is what we learned.
- HTML is a markup language used to display content in a browser. When we change the appearance of a webpage, what we are really changing is the Document Object Model, which directly determines the appearance displayed in the browser.
- We can view and manipulate the Document Object Model by opening our developer tools, but when we do so the HTML is not changed.
- We can also view our Document Object Model by opening the console and typing in the word
- To get your header back, just hit refresh
Next, we'll take a deeper look at how to select elements!