Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

6.2 Finding Elements

Naturally, before you can manipulate elements, you have to find them in the document. In this lesson, you'll learn the three methods we use to find elements.

6.2 Finding Elements

One of the most important things that you will learn is how to find elements in the document, because you can't do anything with those elements unless if you can find them. And the document object model gives us several tools for finding elements. The most simple is by the ID. So if you wanted to quickly find an element, just slap an ID on it, and then through JavaScript, you can find that element. So let's make a few modifications, first of all. I'm going to change the text size of our div element and I'm gonna call this the message element. I know that it is technically a div element, but it has an ID of message and it's just a lot easier for me to say message element. We're gonna change the font size here to something very large, let's say 26 pixels and then let's add some text. This is a message, and let's see what that looks like. That's all right. Let's change the background color too and I'm just gonna paste this in. There's no rhyme or reason to this particular number, I just used the color wheel here to select something that was not white, so that the text will pop out a little bit more. And so now we want to retrieve that div element and we can do so using the get element by ID method. As I said, this is the simplest way of finding an element. It's also the quickest way, because the way that the browser loads our HTML, it also builds a table behind the scenes that matches IDs with their associated elements. So finding an element by its ID is very, very simple and quick. So let's say that we wanted to change the CSS color property. So we would access that elements style property, we would set the color, and let's just change this to blue. And so over on the right hand side, we see that the message did indeed change to blue. And we can prove that it is just applied to this element if we inspect the element. So let's do that. That'll pull up our developer tools and we can see in the HTML that we have our ID of message and the style is set to blue. So pretty simple stuff. If you wanted to find that element, just slap an ID on it and then find that element by its ID. Well let's change its background color to something else like yellow. Once again, we're going to see it change in the browser so that the background color is yellow and the color is still blue. And once again, if we look at the HTML, we can see that the style attribute is set to those values. Now we have done something that it's not incorrect, but there is a better way of going about this. Because we are retrieving the same element, and even though that this is the quickest and most efficient way of finding an element, the browser still has to execute this code. And so if you think of our document as a pool, and every time that we call get element by ID, the browser has to dive into the pool in order to find that element so that it can bring it back up to the surface. So what we want to do to be as efficient as possible is actually store this within a variable so that we can reuse that variable whenever we need to reference this message element. So let's just create a variable called message element. We will call get element by ID and we will store that in that variable, so that then we have it cached inside of this variable, we are storing it in memory, which in today's day and age memory is no big thing. I mean, even the smallest computing devices that we have have a ton of memory. Now our CPU cycles, that is something that we need to be very careful of, and every time that we call get element by ID, the browser has to use CPU cycles in order to retrieve that element. So the best practice is to retrieve that element, store it in a variable, and then use that variable whenever you want to manipulate it. All right, so let's go back to our HTML and let's change this so that instead of having our message directly inside of this div element, we have it inside of our span element. Now this is not going to change how it is rendered in the browser because we are still retrieving our message element and then setting those CSS properties. But let's do this, let's say that we want to retrieve this span element. Now yes, we could come in here and we could give it an ID of span element or whatever we wanted to do, but in today's day and age, that's not a feasible option. So instead, what we can do is use another method that will allow us to retrieve any element that we want using a CSS selector. So once again, we are gonna create a variable so that we can store this element object. And we're gonna call a method called query selector. We simply pass in a CSS selector, and the browser will return the first element that matches that selector. So in our case, the selector is the idea of message and then it contains a span element. We can do this in a couple of different ways because our document is so simple. We could use the CSS selector of div space ban, and that would work too, but let's go with message. And let's say that we want to change the color of the span element to blue. We will keep the div element with the background of yellow. Now as far as the visual representation, nothing changed. But if we look at the HTML, we're going to see that it definitely changed because now our div element has a background color of yellow, the span element has a color of blue. But that of course makes sense because that is exactly what our code was written to do. But what about multiple elements? Like for example, let's say that for whatever reason, our message is broken up by span elements. So each one of the words is contained within its own span. Now over on the right hand side, we can see that our message changed. Now the first word is colored blue, the rest of the phrase are black or just normal colors. And the reason is because even though we have multiple span elements, our query selector still worked. It just returned the first element that met the criteria that we passed to it. So we have another method that we can use to retrieve all of the elements that can be matched based upon a query selector, and it's called query selector all. Let's pass in the same CSS selector query. But now we have a variety of span elements. And so far we've been working with individual elements. If we came in here and if we did span elements style color equal blue, well, that's not going to work because the type of object that we have in our span elements variable is not an element object. It's a different kind of object called a node list. It's a collection of elements and we work with node lists differently, and you will learn how to in the next lesson.

Back to the top
View on GitHub