by
Lessons:12Length:1.4 hours
Practice javascript and learn dom manipulation 400x277
  • Overview
  • Transcript

2.1 Finding and Selecting Elements

Before you can manipulate elements, you need to find their corresponding objects in the document. In this lesson, you'll learn about the getElementById(), querySelector(), and querySelectorAll() methods.

2.1 Finding and Selecting Elements

In this lesson we're going to look at finding and selecting elements in the document. Because before we can manipulate an element, we have to retrieve it. So, let's create a file inside of the public folder and I'm gonna call it selecting.html. And let's change the title to 2.1 and this is Selecting Elements. Now let's add a script element because of course we want to write some JavaScript. And let's say that we want to retrieve the body element. Well, the body element is very easy to retrieve, because it's actually a property on the document object. So we can easily find that element by saying document.body. Now here's one of the things about using the dom. Everything revolves around this document object. So whenever we want to find an element, we gotta use the document object if we want to create an element. Once again, we have to use the document object. So, you can think of the document object kind of as a front door to the dom, that's a gross over simplification. But for the most part, we're going to use the document a lot because that's just how we access things within the document. And that's also kind of brings me to the point that everything in the document is an object. So we have HTML here. And of course, this is an HTML file, so what we are seeing is text. But when the browser loads this HTML, it's going to build a document structure that resembles our HTML inside of our document file. So, every one of these elements is going to be represented by an object. So, we have this document object which represents the document as a whole. Then we have this body object that is a property of document. And that represents the body element. If we have a div element with an id of container, and then let's also have a ul that has a class of list. Let's also add an li that has some text. This is the first item of the first list. So we've just added the three elements, there are three objects in the document that represent those three elements. So there's going to be a div element object, a ul element object, and li element object and they are all related in some way. This div element is a child of the body element. This ul element is a child of this div element. And if we had two li elements here, let's do that, these would be siblings to one another. So there are a set of properties on each one of these element objects that will allow us to navigate to either a parent, a child or a sibling. We're not going to go through all of that primarily because it's boring, first of all. And in today's day and age, it might be useful to be able to find a parent or find a sibling. But you will learn how to do all of that throughout this course. So for right now, we're just going to focus on finding elements now. I do want to copy this ul element. I want to place it outside of the div element and let's change some of this text so that we have this is the first item of the second list. And this is the second item of the second list, that way we can visibly see the differences in the document. And so let's go to selecting HTML, and why don't we see anything there? Let me make sure I saved that file. I didn't, that's why. So there we go. Okay, so we have been able to retrieve the body. So, let's focus on retrieving this div element with an idea of container. So when it comes to finding an element, the easiest thing that you could do is just slap an ID on it and then use a method to retrieve that element. And it's called getElementById. And then you'd simply pass in the Id of that element. That's going to find that element, and it's going to be very quick because it doesn't have to parse any type of CSS selector, and it doesn't have to match any elements based upon a complex CSS selector. It's going to look for any element with an Id, and it's going to match the Ids. If it finds it, we get that element object, which in this case would be what's called an HTMLDIVElement. Or if it can't find an element with an Id, it returns no. And so if we write this to the console, which kind of sounds a little weird, but whenever we look at this in the browser, you'll see that well it does make sense, because when we look at this in the console, we see that there is a div element here. An all chromium based browsers do this. If you have an element object and you write that to the console, it's going to write that element to the console. And you can see as I hover my mouse pointer over that element in the console, you can see it being highlighted in the document. And I can expand this and I can drill down. You can see that by simply selecting this div element, I now have easy access to all of these other elements inside of it. And so if I wanted to select this ul element, I can do something like this. We'll call this firstList and I can use container followed by firstChild. Now this actually is going to give me that. This is a good lesson. We can see here that's, nope, it's not the element it's instead text. But notice that whenever I hover over this, we're not seeing any text highlighted up here in the browser window and that's because this is just whitespace. So if you remember I said that just about everything in the document is an object. And that is very true not just for elements, but for attributes as well as text. So instead, we could use the child nodes property. This is not an array, it's actually called a node list. But we can use it like an array and then we could specify the index of 1. And since the firstChild, that is of course an index of zero since that is text, then the next child after that is going to be the ul element. We can also do something like this. I said that we weren't going to cover this, but here I'm doing it. So, we could use the firstChild which is text, and then since the text is a sibling to that ul element, we could say nextSibling. And after this I promise we're not going to go over any more of these things. But you can see that's voila, here we have that element object. Okay, so just take that back away, we don't want to spend a whole lot of time with that. Instead, we are going to use another method of the document object called querySelector. This allows us to type in a CSS selector and it's going to return the first element that matches that selector. So if I put in just the class of list, well, that's going to give us that first ul element with the class of list because that's the first one that the document encountered. Now, I could also do this I could use the container object and then call querySelector there. So, not only can I call querySelector on the document object, but I can also call it on any other object and it will search its children. So, if I go back we are going to see that it still selects that element. I don't want to confuse you as to why that works so we're just gonna stick with document for now. And then we could select all of the lists. And we will use a method called querySelectorAll. Once again, we will use the class of list. And this is going to return all of the elements that match this CSS selector. So we have two of those throughout the document. And so if we write allLists to the console then we are going to see a node list that has two objects. The first is the list inside of container. The second is the list outside of container. So when it comes to selecting elements, these are primarily the best ways to do so. If you know what element that you want, and it has an ID then use getElementById. Otherwise, the querySelector and the querySelectorAll methods are very easy to use, and you can retrieve just about any element that you would want.

Back to the top