Here in this lesson, we're going to be reviewing how to interact with the dorm content, so that's
updating the page content using JavaScript.
So accessing the document object, selecting elements from that document object using query selector
and then iterating through, looping through them and also making updates to that content.
So just a quick practice lesson about how to interact with JavaScript code and make manipulations to
the dawn content going over some of the JavaScript functionality that we're going to be covering and
that's going to be essential for the upcoming lessons.
So one of them is to interact with the page elements and we're going to be relying on the document object
model.
So that's the JavaScript document object model.
And what this is, is that's short Dom, and it connects Web pages to programming languages.
And essentially it's what is built by the browser and it represents all of the elements on the page.
So you can see every single Web page is going to have the document object model constructed and using
JavaScript we can interact with the content contained within the document object model.
So I'm running the page.
So each HTML page here and this is just a basic HTML show that we can use in order to interact with
DOM content.
So there are some elements on the page.
There's an H1 tag, there's a div tag and then there's a script tag linking to script one as I've opened
up the console and in order to see the content.
Contained within the document object, you can use the directory method and then just list out the document.
Into the directory, and that will show the document object within the console and from here you can
open it up and you can see that there's quite a bit of information contained in here.
So you can get things like the Web, you are all of that document.
So if you want to output the console log and using the document object and return back to you earlier,
you can put that into a JavaScript value.
So that's just the euro and then you can do the same thing for any Web page that you're on.
So even if I go over to the Mozilla Web page, I do an inspect, open up the console and do a console
log of the document URL.
I'm going to get whatever the current document you URLs.
And you can also do this for any Web page and list the document content.
And here there's quite a lot of HTML elements.
There's one thousand four hundred and seventy nine.
So that lists out all of the page elements that are currently on the page.
And with the JavaScript now we can select and we can interact with any one of these.
And there's also that listener.
So I'm going to be going over some of the that listeners and mainly we're going to be using the click
event.
But there's quite a few other different event listeners that you can make use of.
You can also navigate through the dorms so you can go to the siblings, you can go to the children.
And they're all listed here within the DOM elements and represent within the DOM structure.
So my page, because this HTML object is fairly simple and straightforward, there's only nine main
elements on the page.
So that's the HTML that had the title, the style, the body that each one, the div, the script tags
as well are included and you can select any of these.
So within each HTML collection there's a hierarchy.
So at the top there's the HTML tag.
So it corresponds with what our source code is.
And then within here there's a listing of children.
So within the main HTML there's three children, which is the head the text up here at the top and then
body.
So this text is just representing the spacing that I have within the content and I've only got the one
return within head and then as well I could remove that out.
So once the carriage return is removed, if we go back into the children of the HTML object and then
go down to the children, you're going to see that there's just head and body.
So those are the main elements that we have that are nested within the HTML.
And then also if you go into the body that you're going to see the three children that we have within
the body.
So we've got the H1 tag, we've got the div, and then we've got the script tags as well within the
body.
And that's the difference between the child nodes and the HTML collection, is that the child nodes
will as well include any of the spacing that you have within the source code.
So interacting with the document object, there's also the Windows object, so the Windows object actually
sits outside and it contains the document object.
So this is the main window interface and it represents the whole window as opposed to just the document
object.
And there are some methods that are available within the window, such as commonly used.
There's the window alert as well as other window options where you can scroll to a certain location
within the window.
So if you want it to scroll up and using the scroll, why this can set the scroll position of the window
and this will reset the scroll position back to zero.
So if we want to scroll down the page and then we run the window scroll, why function?
That's going to reset it back to zero.
And that's all available within the default build of your Web page within the browser, so let's interact
with some of the content that we have available within the window.
And if you want to make a selection of the elements on the page and we do have the H1 and I'm also going
to add in a second div and we'll add in some content within the device or one and two.
Let's make a selection of each one.
And the same way that you make a selection with styling, you can select the element from the page using
the contents that are contained within the document object.
So creating an each tag variable and then using the document object, making a selection, you can use
the method query selector and then you just have to specify how you're making the selection.
And in this case, we're going to use the tags the same way as we did with success and making the selection
of the element.
And now we can use that element as a variable value of each tag.
And when you hover over it within the console, it's going to highlight that element.
So if you are using the query selector and there's more than one matching return item, so if you want
to select the div, let's make a selection of the div and this is going to be the div tag.
And what do you think is going to be returned back?
If we're only selecting the div, we've got more than one div and what's going to happen is it's going
to select the first occurrence of that matching selection.
So just like which is different than what we would expect with styling.
So if we added the selection of a div.
It's automatically going to be applying it to all of the matching dips, where is if we use query selector,
we're only get the first matching result, which at this moment is going to be the one that has the
text value of one.
There's also query selector all, and there is more information available about the query selector over
at the Mozilla Developer Network.
So they do have some examples and it's document method available within the document object and it returns
the first element within the documentation that matches the selector, a group of selectors, and if
no matches are found, then it returns back null.
So even if you don't have the matching selection, you're still going to get a response back in.
That value is going to be a response of not of null.
So if we were to select H2, which we don't have on the page, we do get a value of null being returned
back into the console for that variable.
So with query selector, we can make a selection of all of the divs and using the query selector all
method.
So that's going to be different and that's going to create a node list of all of the matching results.
So in this case, we're going to have two results for DIV.
And if we log out the return value for Divs, you're going to see that we're able to select all of the
matching elements.
And just as we saw with when we're selecting it and we're logging out the device and we hover over them
within the console, the same thing happens here.
Whenever we hover over it, we see it getting highlighted up at the top within the display area of the
browser.
So that's up at the top and returning back to matching dips.
And the reason that we can use CONSED is that these are representing just as the document object, it
represents a memory location.
So the actual variable that we're using to define it stays the same, but we're just referencing that
memory location.
So even if we were to take the H1 and we were to make an update to that H1 tag, and because we've selected
it as the each tag, this represents the selection of this object.
And within our code, each tag will represent that object.
We can update contents of it by doing text content and then updating whatever we want for the content.
So you'll see that now this has been updated and changed because we've made the selection and update
of the page content and within the elements, within the live data.
This is the new updated source code, whereas it's different than our initial source code because we've
updated and changed it with JavaScript.
So when the JavaScript code loads, it updates the code that's available within the.
Within the dorm, and this is only updated within the dorm, so if the JavaScript file doesn't run,
then it's not going to update the code.
And just as we're able to select the element and update the valot, the property value, we can also
see the current property value that is associated with it.
So if we were to log that out into the console, we would see the current value for whatever the the
value property value is of text content.
No list will act similar to what we have with an array where we've got a link.
So if we want to output the contents of the node list and we've got that contained within divs, we
can take the device and using the for each method will allow us to loop through and iterate through
all of the values.
There's an example and some more information about the for each method available at the Mozilla developer
network.
And basically what foreach does is it's a method that executes that provided function once for each
item within the array.
So what's happened here is it's looping through.
It's returning the value back as element.
And right now it's just logging in into the console.
And also for the upcoming lessons, we are going to be using the JavaScript Arrow format for functions.
So this is different than running the function method.
So it does the same thing, but just the syntax is different.
So I'll give you a quick example of the syntax for each one.
So the syntax for just the longer version where we're writing out the function word and then returning
back the element.
And we could console log the value of each element into the console.
So that would return back this type of result.
And as mentioned, we are going to be using the Arrow format.
So it's going to be slightly shorter and you can really shorten the Arrow format without even having
the return.
So if you have a one line statement, you can add it in this way.
And that's going to do the same thing where it loops through and it iterates through the object details
and one last one, that typically the way that we're doing it is that we're adding in the extra brackets.
So just so it's a little bit easier to read, but these are optional.
So if you choose to not add in the brackets, that's that's proper coding as well.
So all of these three are going to be doing the same thing.
And for most part, the way that we are going to be writing the code is we're going to be using this
type of format.
And also within the for each function, we can return back the index as well as we can return back the
full array.
And that's going to be the array or the object contents that are added in within divs as a whole.
So if we want to output those and use them, as are, we can see that we list out the value of the node
list down here at the bottom, which is actually going to be the same as dips.
And once again, to reiterate that this is pointing to a memory location and that's why we're able to
assign multiple variable values that are linking to that location.
And it because this is within an object, this variable value, as long as you're not changing the link
to that object itself, you can update or manipulate the contents of the object.
So if we were to loop through and we select the element and just as we saw up here, we're updating
the text content of each element.
And adding it together and just putting the index value, now we're updating the content as we're looping
through and the URL is referencing whatever the current div is that we're on with the index value.
And it's also still referencing the same way where we selected the first div.
So either way of these references are able to return back the div content and the idea is the same if
we say Divs and we use the index value and then update the text content for that.
And this can just say hello one and then divs with an index value of one can say hello to.
So at the end we end up with Halo one and hello to as we're referencing the element object.
And for the upcoming lessons, it is going to be important to understand how to access and manipulate
the DOM content.
As we do get the chasten data, we're going to be making use of the JSON data and manipulating the page
element and the DOM content with JavaScript.
So try it out and select some content from your page using the document query selector and then make
some manipulations, update the text content of the element and also iterate through if you have multiple
occurrences of that element and output them into the console and you'll be ready to move on to the next
lesson.