Hey, everyone.
Welcome back.
So far, we wrote a few statements.
We talked a little bit about JavaScript syntax.
And now we just want to start interacting with the elements of our page.
Because to do what I showed you in the first video, opening and closing menus, navigating through
photos, sliders, expanding and collapsing sections.
We're going to have to be able to select and change age out elements.
So in order to do this, it's important to understand what is the DOM, which stands for Document Object
Model.
So this is an object created by the Web browser as soon as the page is loaded.
So this object is going to contain all the nodes of our ASTM out page, which are the HCM out elements.
So I'm providing your a simple example.
Let's say we have this super simple Web page.
So we have the had element inside the body.
We just have an age one and a link.
When the page is loaded by the browser, the browser is going to generate this DOM tree.
So we can see that at the top of this tree.
We have the document object.
And then right below it, we have all the elements.
So here we have the ASTM out element had body and everything that's inside these elements.
So we are going to be able to select and change any element in our page down here.
I've included a few more examples of what we can do with the DOM.
So add change and remove HDMI.
All elements change attributes of H, the Amelle elements like the class or the source of an image.
So if you think about a photo slider, the way we change that image is just by changing the source of
the image.
We'll be able to change the CSX and we are going to react upon page events, which is really cool.
So instead of just writing some isolated JavaScript code that runs on page load, we are going to write
functions that are going to be executed when the user does something.
So if the user clicks the arrow pointing to the right, then we are going to change the image.
If the user clicks on the plus icon, we're going to expand that section.
So this is what is going to make our page fully interactive.
So now that we know what is the DOM in the next video, we are going to use it to start working with
the ASTM out elements.
I'll see you in the next video.