Welcome, this lesson is all about the JavaScript Dom, that's the JavaScript document object model,
and it allows you to connect JavaScript to what's happening within your Web page.
We're going to be examining what the DOM is and also allowing you to see the DOM and explore the don.
So the DOM is sought for a document object model.
It's a programming interface for HTML and XML documents.
So basically what it does is it represents the page so that programs can change the document structure,
style, content and so on, manipulate, interact with the page elements.
So the DOM represents the document as nodes and objects.
So we've got an example here on the right hand side, and this is a typical structure for the DOM.
So we've got the document object, which contains the HTML element, and then we've got the head tags,
the content contained within the head tags.
So those are children of the parent and then the parent of the head is each HTML and the parent of the
HTML is document.
So it's represented within a tree like structure where we've got all of the different layers of HTML
elements.
And when you are writing HTML code, you will notice that you've got some elements that are contained
within other elements and then some that are siblings of those elements so such as head and body.
So they're siblings of each other because they're on the same level and you can navigate through all
these different elements.
Using JavaScript and JavaScript can change, remove all the time elements.
Update attributes on the page can change CSF styles, make it look completely different and can react
to existing events using event listeners and event handlers.
And JavaScript can also create new events, create new elements and do a whole bunch of really cool,
amazing things over at the Mozilla Developer Network.
There's more information about the DOM, so if you want it to read up more about it, there's also some
typical standards for implementing the DOM within most browsers.
They have an example of it.
And of course, we are going through this in the upcoming lessons.
So ultimately what you need to do is select an element in order to use it in JavaScript.
So you make your element selection and then you can update it and use it, utilize it within your code.
And I'm going to be showing you tons of examples coming up.
So JavaScript is ideal for working with the dorm as the dorm is one giant JavaScript object.
And it works the same way where you can retrieve information, you can select information and you can
update information.
So here's a typical website where we've got the script content and interacting with content that's on
the page.
So it's creating an H2 one each one element and it's adding in content into that each one.
So when the JavaScript runs and renders out, this body will then have the H1 tag within it with the
content bighead inside of it.
There's a lot of great examples of the DOM at the Mozilla Developer Network.
And in this lesson, I'm also going to show you a quick way to see the dom of any Web page.
So first you need to select the element that you want to use.
And because all of the page elements are contained within the document object, this is the starting
place for selecting elements.
So that's why we use document and we're going to be referring to document in every single lesson coming
up.
So we're probably asking yourself, well, what is this document?
And it is available on any webpage and all you have to do is open up your browser console and type in
console dot directory, and we want to be able to traverse through it and look through it.
So that's why we use directory and that gives us the ability to look through the different elements
that are on the page.
So let's take a closer look at what's available.
And again, this is available at each and every Web page.
So if you go to inspect, open up the console and type in console, it's console directory document.
This will give you a look at what's contained within the first off, there's a lot of information contained
in here, and every single piece of information that's within the Web page is contained within the document
object.
And as you can see, there are one thousand five hundred and forty eight different HTML collections
listed.
So that means there's a lot of stuff in there.
And of course, this is the Mozilla Developer Network.
So there is tons and tons of content on here.
And so you can go through them and you can see all the different HTML elements.
You can see the had all of the different links that are available on the page and also more information
that's contained within these.
So you can literally go through here.
And this will probably take you a very long time to look through each and every one of these.
And the good thing about it is that there's repetition.
So there is consistency how we can access content within the DOM.
So that makes it a little bit easier.
So go over to your favourite website, open up your console and type in console directory.
And I'll also show you within the example how you can output the page.
So we are we are going to be working with.
Starting HTML page that's got some random elements within it.
So we've got an H1, a div unordered list and then we've got script touching to our apps JS file.
So this is on the same directory so you can open that starter file up as well.
So it's indexed HTML and then type in console directory and then accessing the document object.
And you can see again more information that's contained within the page and you can go through and you
can select the different elements and update the elements.
And I'll just show you a quick one here where we're going to use query selector and we are going to
be using this quite a bit coming up.
So you select the different types of element tags.
So you see when we do select it, it returns back the H1 and we can in the console hover over it.
And it also highlights that within the page.
And then also with JavaScript, you can update the entire text or the entire e-mail and wow, that was
easy.
So just with one line of code, with one statement, you can update any one of your HTML tags just like
that.
And then when you go back into the elements and if you go back to the HTML code, you can see that it's
updated for this instance of the website.
So the code hasn't actually changed, but we've updated what's available within the DOM and the DOM
is the references, Tatian, of the content output on the page.
So it's just not easy to update some of the content and we are going to be exploring this in more detail
as we progress to the lessons.
But you are welcome to try this out, as well as printing out the document object and taking a look
at it, and you can be ready to move on to the next step.
So now I've added in that HTML in our HTML update within the JavaScript file, as well as outputting
of the console directory of the document object.
And when now when we refresh it, we can see that the HTML updated via JavaScript, navigate through
the document, object to take a closer look at the content that's contained within it.
So if you add it into your JavaScript, you're going to see that you have access to the document object.
So try it out for yourself.