All language subtitles for 004 Selecting HTML Elements with Javascript.en

Welcome back guys.

So, as you saw in the previous lesson, we were able to use Javascript to select HTML elements and change

its color property.

Now I showed you one way of doing this using a method called querySelector, but there's actually a

lot more ways that you can do this.

Now I've added a few classes and ids to our current web page, so we can try out all of the different

ways of selecting elements inside the DOM.

Now the first one I want to show you is the getElementsByTagName, and what this does is that it looks

through the web page and it searches for the element with a particular tag name.

So, for example, if we wanted to get a list item as we have here, we have three list items inside a unordered

list.

If we run this line of code, getElementsByTagName, then you'll see that we actually get back an

array that contains all three of our list items.

And if you expand this you can see that each list item has a whole bunch of properties that you can

tap into and you can manipulate.

Now, the important thing about this method, and where it differs from the previous one that we used,

which is querySelector, is, if you notice, the word elements is plural here,

and what this means is that it's going to fetch all of the elements that have this particular tag name.

So it's not just going to fetch one.

Now this is important because when you try to manipulate one of these elements,

so if we try to tap into the third list item, then we can simply say getElementsByTagName,

and whereas before we just said .style.color equals, say, I don't know, purple, then this is not going to

work, because, even though the error that you get is a little bit misleading, it says Cannot set property

of undefined,

and the problem is that we're trying to set the color purple to an array, which doesn't work because,

remember, this part of the code gives us back this array with all three list items,

and if we try to set its style property, that doesn't make any sense.

So what we have to do instead is we have to select the item in the array that we want to change and

remember when we select items in arrays we always use the square brackets.

So if we wanted the third item, then we would put in the index number 2, and then now if we set

style.color = "purple", then you can see that it's changed

our third list item to a purple text.

Now if you're at all confused about arrays then be sure to go back to the last module where we spoke

about arrays in detail and you can get to grips with this idea before you head back and we continue.

Now in addition to being able to tap into a particular element inside this array of items that all have

the tag name Ii, we could also use some of the other things that we saw that you can do with arrays, namely,

for example, if we wanted to know how many elements there were that have the tag name li,

then we can simply generate the array of all of the items and then call .length to get the length property

and that will tell us that there are 3 li items in total on this entire page.

So that's pretty neat.

Now, along this line of getElementBy, you can see that there's a whole bunch of other ones,

and another useful one is getElementsByClassName.

So what this does is it allows you to select elements based on the name of the class. So you can see

here in our web page,

I've given a class to some of these elements.

So for example the button element has a class of btn.

So we can select that button by saying document.getElementsByClassName, and then inside here

we'll add the class btn.

Now notice this method also has a plural, Elements.

So that means that we're also going to get back an array.

So it doesn't matter whether if you only have one item that has the class btn. It's still going

to give you back an array.

So that means that doing this also does not work.

And so even if there's only one item that has that particular class that you're selecting, you still

have to select the first item using the square brackets and using the index 0.

Now the final one in this style of getElementsBy is the getElementById. And the keen eyed amongst

you might have noticed that in this case the word Element is no longer plural,

and so in fact using this method you only get back one item instead of an array,

and the reason being, of course, that, on a single web page, every single id should be unique,

so you should not have the same id on more than one element.

So, for example, in our case we've got the id list for our unordered list, and we've got the id title for

our h1.

So if I select on that title id, then I will only get back a single item as opposed to an array of items.

And in this case we're getting back our h1.

So if I want to change the text inside that title, I can say simply select the element that has the id

title, and then change its innerHTML to say, I don't know, Good Bye.

Now that text has gone from Hello to Good Bye by selecting it and then manipulating it.

Now, another method that can be used to select a single element is the querySelector method that we

already saw in the last lesson.

Now this method, similar to getElementById, also only returns a single item, but it works a little bit

differently, because the string that you're going to put inside the parentheses is a selector.

Now what are selectors?

Well, we've been using it in our CSS

all of this time.

Here's the styles.css us for our TinDog web site.

And you can see that the selector that we use in CSS is just the part that we specify before the curly

braces.

So to select elements we simply just write the name of the element, to select classes

we add a dot in front of the name of the class, and to select ids we add the pound sign in front.

And of course with selectors we can combine different things,

for example an id with a class, or a class with an element, and it's a much more specific way of selecting

a particular thing inside your web site in order to change.

So let's head back over here and let's use our querySelector to select something.

So whereas before, when I used getElementById,

I could only specify a valid id, and when it does getElementsByClass then I could only put in a class,

inside here

I could put in an element, a class, or an id,

it doesn't really matter.

So for example, if I want to select our h1, then I can simply say h1 in here, or if I wanted to

select it by its id, then I could say querySelector, and in here I would add that pound sign to show

that I'm specifying an id, then I would use the id title, and still we would get back exactly the same

thing.

And it works exactly the same way with class as well. All we have to do is just add a dot in front, just

as we did inside the CSS.

So if I wanted our button then I can just say .btn and I would get back our button.

But more importantly, I can combine our selectors and query for something that's quite specific.

So for example we've got a link here inside our first list item.

Now let's say that we have another link that's just free floating around,

and I only wanted to select the link that was inside the list item.

Well, I can do that by combining my selector and saying select the anchor tag inside the list element.

And remember when we're doing hierarchical selectors, there's a space between the two selectors.

So now, if I hit enter, then you can see that I'm getting back the href that's inside our li, as opposed to

this one,

whereas if I just said querySelector("a"), then I would get back

this first one. As you can see the highlighting is showing you which one we're getting back from these

results.

Now I can also combine my selectors by saying something like I want the element that has a class of

item that is also an li element.

So to do that I would say li. to specify the class which is called item.

And remember when you're combining selectors,

so things that occur in the same element,

then there are no spaces.

So whereas before it was the anchor element inside the list element,

so hierarchical, the child of this parent, in this case it's all in the same element.

It's the list item that also has a class of item.

So now if I hit enter you can see I get back my first list item, and you can also use the id as well.

So, for example, in this case, what do you think I will select based on this selector?

Five seconds, see if you can get the answer.

All right.

So this is a hierarchical selector, as you can tell by the space in between the two selectors.

So in this case we're looking for an anchor tag that is inside something that has an id of list.

So, in that case, that is going to be this one, which is a child, or rather grandchild, of this unordered

list with an id of list.

And if I hit enter we can confirm the answer.

Now here's a question. What if your selector matches more than one object?

Because if I say, for example, id list with a class of item, then you could see that all three of these

list items satisfy that query.

They all have a class of item and they're all nested under a ul with an id of list.

So which one do you get back?

Well actually, you only get back the first item in the document that satisfies that selector.

Now, what if you wanted all of the objects that match that selector? Well, then you would have to use a

slightly different method. Instead of querySelector, which sounds very singular,

you would have to use a method called querySelectorAll.

And now, by using the exact same line of code other than that word All, we get back a list of all

three list items that satisfy that particular selector.

And similar to before,

if you wanted to change and manipulate items in here, you would have to specify their index, because it

is an array.

Now, given that we've seen all of these different types of ways of selecting our HTML elements, which

one should you actually use?

Well, querySelector, and it's slightly greedier brother querySelectorAll, allow for more complex

queries, because we're able to specify id, class, element, tag names, and combine them in order to target

the exact element that we want,

whereas the getElement methods are more broad and it's more difficult to target individual objects without

going in to change the HTML.

So, generally, in the code that you'll come across in the wild, you'll see querySelector a lot more than

getElement, as, in most cases, you can use querySelector and querySelectorAll to do all the things that

you can do

with the getElement methods.

So I recommend that you try out all of them and you'll get a feel for which one will be the most adaptable

and which one you'll find to be the most useful in your case.

Now as a challenge I want you to use what you learned in this lesson to change the text color of the

Google link over here.

So not this one but this one.

Now remember that, if you look at the DOM tree, that link is an anchor tag nested inside a list element,

so try and see if you can change its color to red. Pause the video and complete the challenge now.

All right.

So how did that go?

Well, remember that the anchor tag that we want to change is nested inside an li inside a ul.

So in order to change the color of our Google link we have to select the anchor tag and not just the

list item.

So to do that you have to tap into the document and then we have to querySelector for a anchor tag that is

inside a list element.

And now we can use this.

And now let's just confirm that we've got the right one.

There we go. And the anchor tag that we want is being highlighted, so we can now go and simply set its

style.color to red.

There we go.

And now that link is red.

Now if you tried to do this just by selecting the first list item then this will only change the color

of the bullet point without changing the color of the text,

and that is because this anchor tag is actually a separate element from the list item.

So maybe that was a little bit mean on my part but I hope it was fun trying it out nonetheless.

So in the next lesson we're going to learn more about how we can manipulate the CSS styles using Javascript.

So I'll see you on the next lesson.