This lesson, we're going to be selecting the element and the contents of these elements that we created
in the previous lesson.
Well, first of all, let's start by creating a variable, we'll just call it temp and then using the
document object.
So remember, this is an object and in JavaScript objects, you can move through the different objects
by the dot notation or you could use the bracket notation as well.
So we're going to do DOT.
And then looking at all of the different children and the methods that are available, we want to use
one of the methods that's available within JavaScript and that's query selector.
All this is one of my favorite ways to make a selection.
There's query selector and query selector all.
And because in this case we're only selecting the one element I'm going to use query selector.
Using the tag button, I'm going to be able to select it within that type of format and now when I type
temp, we can see that the button is the one that gets lit up.
So Chrome is lighting that up when I'm hovering over that, and then I can make use of the content that's
available with it.
So now I've got an object called temp.
I can do inner text and you can see that Chrome gives you a suggestion of all the different available
methods.
And I'm going to change that to Hello World, that inner text.
And as you can see, the content updates within the button as well.
And this is how easy it is to use JavaScript and manipulate the contents of an element.
You can also get information contained within there and that if we just simply type in temp, inner
text, we can already see that the word hello world is being returned because this is the value of the
entire text of temp is Hello world.
Now let's make use of it within JavaScript, within our ED opening up our script file.
We're going to do the same thing, but we're going to use CONSED because this object isn't going to
be changing.
We can use Button as our variable name.
And using the same format that we just saw, document and query selector.
Selecting the button element and now we've got it available within our button variable and we can output
that button variable.
So when I refresh the page, you can see that that element now has been output into the console.
And that means that we have it within an object format that we can make use of within our JavaScript.
So the next step, if we want to update the inner HTML or the inner text, we can do our HTML.
And the difference between inner HTML and inner text is that the inner HTML allows you to have HTML.
Scripting, whereas the inner text only outputs it as text format.
So we'll update that to say hello, refresh the page, and you can see that now that has been updated
as well.
So go ahead and try this out for yourself.
Open up your editor, make a selection of the element on the page and update the inner HTML or inner
text of the content of that element that you've selected.
And the next lesson I'll show you even more you can do now that we've selected it within an object format
and we can make use of it within our JavaScript.
So go ahead and try this out for yourself.