Going forward, you're going to hear me say a certain acronym a lot: DOM.
Dom de dom dom dom
DOM stands for Document Object Model,
and it's the way that browsers let us developers
manipulate webpages with JavaScript.
Whenever a browser loads a webpage, it parses all the HTML and CSS,
and converts the document into a DOM.
That DOM is really a big JavaScript object
that contains everything we'd ever want to know or change about a page,
like every single tag, and attribute and style for each tag.
To access the DOM on a webpage from JavaScript,
we use the global variable `document`, and then we can use properties
and call functions that are attached to this object here.
The general strategy for DOM manipulation is two steps.
Let me just make a list of them here.
Here we go, and then we have the second step.
Let's go through each of these steps now.
So the first step is to find the DOM node using an access method.
If all we're looking for is the tag, we can access that really easily
just by saying `document.body`.
And now the second step is to manipulate the DOM node that we found
by changing its attributes, styles, inner HTML,
appending new nodes to it, ... .
So if we just want to replace the contents of the whole tag,
then we can use the `innerHTML` property.
So `document.body.innerHTML = "Webpage be gone!";`
Ta da, I did it.
The browser is watching for changes to the document object,
and as soon as it sees you change the innerHTML of document.body,
it reflects it back in the actual document.
Remember, the document object isn't the actual webpage,
but the browser tries to make it reflect the current page as much as possible.
Now, there are a lot more ways to do step one,
because usually you want to find something besides just the body tag.
Maybe you want to find a tag with a certain ID, or all tags of a certain type--
That's what we'll talk about in the DOM access methods tutorial.
There's also a lot more cool stuff you can do in step two,
like changing the attributes or styles of the tags you find.
We'll talk about all that in the DOM modification tutorial.
Once you've mastered DOM access and manipulation, we'll move on to fun ways
to use it, like when responding to user events or making an animation.
Right now, it is a little silly that we use JavaScript to do
what we could have just done with HTML at the beginning,
but trust me, you'll want to master DOM access and DOM modification
so that you can make full interactive experiences later.
So, keep it up, and see you soon.