Element selection is key to being able to work with the elements on the page, you need to be able to
select the element properly if you're familiar with success.
The process is the same.
You select the element and then you make the updates to the properties and values.
So JavaScript, same idea.
In this lesson, we're going to be exploring how to select an element.
There's various ways to select elements and then we're going to be updating the background color of
that element that we've selected.
So the objective is to try to pick out an element on the page and find something that's unique enough
that you can identify it.
And of course, ID is one of the most unique ways to have elements on the page assigning them an ID
because every element can on the page can only have one unique ID.
You can also select it via tags or class, and sometimes you will return back even more elements than
the one that you're trying to select.
And there is a way to handle that.
That's coming up in the upcoming lesson.
And you can also use CSFs type selectors.
So we've got a lot of options to make the selection and it's up to you, whichever one you prefer.
Personally, I do prefer using query selector because it's almost like CSI.
And as you can see in the example, on the right hand side, we do the same thing where we've got an
ID using the hash as a pretext to the name of a class is prefixed with a dot and the tags don't have
any prefix.
So exact same thing that you'd expect and that you've seen with success.
And once we've select that element, then we have access to its style attribute and we can update the
background color to whatever we want.
And also with the CSA selectors, they're going to work the same way where we've got a list item and
we can select our first child, we can select our last child, and we can also use anthe child.
So these are CSA selectors and they work when you're using query selector.
And that's why, again, one of my favorite ones to use is the query selector.
And oftentimes if you do have elements given an ID, this is one of the most basic ways to make that
connection.
So that's just using get element by ID selecting the elements within the various IDs.
You can see there's more information about the query selector available at the Mozilla Developer Network.
They also have an example, of course, where we're selecting and we can select it within access type
style.
So they've got some HTML and then they're making a selection of those elements.
And Query Selector is quite flexible.
So we can select the paragraph, we can select the ID here as well, and we can also use the CSF selectors.
So div span giving us some more details on the ability to make those selections.
And then this works with any HTML.
And as we saw earlier, all we need to do is select and then we can update and utilize Java.
So there is a challenge of course for this lesson and that's to select XHTML elements from the page
and update the background color.
So try it out in a few different formats, selecting by the ID and then also try even by the class,
by the tag name and also try some key selector types as well, selecting various elements, updating
their background colour.
You can change them to all kinds of different background colours, have some fun with it, experiment
with making selection and get more familiar with it.
I've got a quick sneak peek at the solution code so you can pause the video here and try it for yourself
and I'll show you the solution.
I'll walk you through the solution coming up.
So opening up our Ed, we're still using that same index, that HTML file.
So we've got some elements here that we can select and make use of.
So first that we want to do is select some elements.
So we're going to just console log these elements out into the console.
So using document in order to make the selection of the document object, it's got a bunch of methods
that are attached to it.
So the get element by ID method will return the element with the specific ID and in this case you can
single coat, you can double code.
I'm going to use single quotes here and we're all we need to do is specify the ID value of the element.
So going back to the HTML, you can see I've got one element up here with an ID.
So this is the one that I'm selecting in the console.
When we refresh and you hover over the element in the console, you can see it highlights and blew up
above within the Web page.
So that means that we've selected it properly and then we're ready to make some updates and manipulation.
So the other option was to use query selector so we can select that again, the same format and accept
the method is different where we're using query selector.
And in this case, again, we can use single or double quotes.
It doesn't matter.
I'll just use single quotes to be consistent.
And in this case, because it is S.O.S type selection, we need to include the hash in front of the
my ID, otherwise it's going to try to select the tag.
So next we log that out and we been able to select that same element in two different ways.
And you'll find that there's a lot of different ways to select the same element and you just have to
be creative in order to select the right elements that.
You want to use and how you make the selection is really up to you.
Let's try a few more so we'll cons. logout and again, using the document object.
And I did mention we are going to be using it all the time.
So you're going to get really familiar with it by the end of this section.
So next, what we want to do is select an element with a class.
So we have a little bit of variety here and we can see that within the console.
We've selected that first element with the class of first and you can see the contents of it.
So this is that full div and we got all of the elements that are inside of there as well that's being
returned back.
And there's going to be more on this later on, how you can make use of that next console log and to
have some more variety.
Let's select the first div on the page.
And when you're using query selector and you're selecting elements that have a possibility of more than
one being returned, you're going to get the first one being returned back.
So next, we've got the div and looks like we've selected that same one with the ID.
And you can see it's again being selected because this is the first div on the page.
If you want to be more creative with the elements that you're selecting, you can go through using more
complex success selectors.
You can also, as we saw, we can make updates, manipulation of the element.
So let's do another query selection.
So always first select the element that you want to use and in this case will select the first spane
on the page.
So specify spane as the tag and then we can use style properties and you can see that with style brackets
is returning back a whole bunch of options.
So literally anything can do a success.
You can do with the style attribute.
So typically whatever you'd put within the style attribute of an element, you can do that via JavaScript.
And then setting the background color and then you can set the background color to whatever you want
it to set it to this case, I'm going to set it to yellow.
So the first span on the page gets a background color of yellow.
Let's try a few more and we'll set some different colors and we'll update these values as well to select
different elements.
So do blue and we'll have a whole rainbow of different colors.
We can do red as well.
So we're selecting the span.
We can also select the element that's first span and that should return back the same one.
And notice, just as we would with CSF, you can overwrite the value of the element style attribute.
And also just to show you as well that when we look make this bigger so we can see it better when we
go into the elements, you can see that these elements, the ones that we are selecting, are getting
the style attribute added in.
So this is just manipulated.
And of course, when we reload the page, if we don't have the JavaScript within the code, then the
span is going to stay as it was, as it was written.
And then the court, the female code, let's select something different.
We've got a bunch of list items so we can select our list item and turn that one green so that one turns
green.
And we can be more creative with using CSF selectors so we can do something like the last child if we
wanted the last one to be green.
Also, if we want to be really specific, maybe we have a few different lists or something, different
reasons why we want to make that selection be more specific so we can do the first child.
So that's another success selector that you typically would see and use.
So we're just selecting the first one.
So the list item, because this is the first one on the page, this is being returned back.
But again, you can be even more specific and you can also specify the unordered list.
If there's a class that's the class second list item, first child.
So really, really specific, Boeung, I try to keep them fairly short and consistent.
You can also do the ninth child and this is another success type selector.
So select the second and third child and that's going to return back this item.
So this is the second one in the list.
And if you do fourth one in the list, you get somewhere in the middle there.
So number four.
So go ahead, try this out for yourself.
Have some fun with it.