So now we've discussed why you should care about the Domm why it's exciting.
And we've also talked about what it is what the document object model means.
The fact that it's just a model of every element on a page using javascript objects the top level object
is called the document.
So that's great but we haven't seen how to do anything with it yet.
So in this video I'm going to briefly introduce the process of manipulating things using the dog.
So I've boiled down the whole process to two keywords select and manipulate.
So just like see assess where we write a selector to select something with the class of special or all
h ones or all image tags we select elements and then we apply styles like background color purple border
one pixel solid black with javascript and Dom and population.
We also select elements although we do it in a very different way.
We write javascript code which goes and selects elements and returns them back to us and then we change
properties on them so we select something and then we manipulate it.
So in the next few slides I'm going to show you how he could select this H-1 my header and how we could
change it to be pink.
I've been saying this a lot in the last few videos but I don't want you to focus on the syntax as much
as the concepts.
The next few videos will get into the nitty gritty of selecting and manipulating.
This is just an overview of how it works.
So on this slide I'm going to show how you could select that H1 just like with C.
There's a lot of different ways of selecting a given element.
In this case this line of code document dot queries selector H-1 is going to select the H-1 on this
page.
So I've highlighted here with this green box so you can see what's being selected.
So again var H-1 this is just any any variable we want equals document that query selector 8:1.
So we'll spend a lot more time with queries selector and define what it is and how it works.
But it returns an object that represents this H1 and it saves that in the H-1 variable.
So that's the selecting process.
The next part is manipulating it so to manipulate it I can do all sorts of things and all that I'm going
to do here is change the color to be pink.
So we just write H-1 which is our variable that has the object representing the H-1 dot style.
That's one property and that style property is a huge object with a bunch of other properties and color
is one of them.
So H-1 does style but color equals pink.
And then that's all we have to do.
And the browser sees that I change that property to pink and it automatically updates what's displayed
by turning it pink.
So we selected here and then we manipulated.
So I have one more example here.
It's a little more complicated.
We're doing a very simple animation where every second we're changing the background color of the body
between blue and white.
So what we need to do first is select the body and then manipulate it so to select it.
I have another line using document dump query selector which again we're going to come back to in the
next video document that query selector body.
So that gives me the body element where it actually gives me the object representation the model of
it that I save in the body variable.
Then I have this variable is blue which is just a boolean that I'm going to use because I need to know
if I'm going from blue to white or white to blue.
So it starts out as false and then I'm using set interval which we covered a few years ago.
If you don't remember how it works it basically takes two arguments.
The first one is some code to run a function and the second one is a number or a time in milliseconds
.
So it takes this number of milliseconds which is one thousand or one second and every one second it
will call this code.
So what this code does is it checks if the background is currently blue if it is.
We then change it to be white if the background is white then we change it to be blue.
So to take a closer look we have our if is blue.
So that's just variable.
It starts out as false.
So the very first time the page loads the background is white is blue is false.
So this line doesn't run but this one does else body does style dark background equals to this hexadecimal
color which is blue.
So that changes the background to be blue.
So then we just change our is blue variable from false to true.
And that's a nice sort way of doing it with the exclamation point or the not operator.
So then this code runs again next time is blue is already true.
So this code does run body does style but background equals white.
So now we're going back to white.
This doesn't run and then we change is blue back to false.
And that keeps going forever.
So not that you would ever want something as distracting as a background color that changes every second
.
But this does go to show that we can do things more complex than just changing an H1 from black to pink
.
So to wrap all of this up two words select manipulate we select We grab some objects that represent
elements and then we do something to them.
So the rest of this unit is going to be focused on different ways of selecting and then different ways
of manipulating.
So the next video is going to dive deep into the different ways of selecting elements using javascript
.
We've seen one already queery selector.
We're going to expand on that and learn a few more