7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 7Length: 36 minutes

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.2 Targeting Elements Using Selectors

In this lesson I will show you how to use CSS selectors to target DOM elements using plain JavaScript.

Useful Links

2.2 Targeting Elements Using Selectors

Hello and welcome back. In this lesson, we're gonna talk about how to use CSS selectors in JavaScript to target a particular dom element on the stage. So we've talked about how to use getElementById, or getElementsByClassName. But as we've mentioned, neither of these are using CSS selectors. We're just entering in the name of the ID or the name of the class in parentheses here. Well, if we need something more complex, for instance if we want to find an element that has both an ID and a class, or an element that has two class names, or maybe one element that's inside another type of element. We can do that using CSS selectors, and there is a JavaScript method called querySelectorAll that allows us to do that. So we're picking up where we left off in the last lesson. You can find the URL for our starting pen in the course notes for this lesson. I'm going to click on the fork to create a new copy, and all over changes will be saved in this new copy. So this is gonna be a pretty short video. I just wanna show you how you can point to, for example, let's go into our HTML here. Let's say that we want to point to a panel heading that's specifically inside a panel question. Maybe we have a couple of different types of panels on the page, and all of our panels have panel headings, but we wanna particularly point to the panel headings that are inside panel questions. So the way we would do that, let's go to our JavaScript here, let's create a new variable, and I'm just gonna call this tempVariable cuz I'm not really gonna hang on to this for any length of time. And the way we do this is we type document, as you might have guessed, dot, and then again the method is called querySelectorAll(), and this will grab all of the items that meet the criteria that we're gonna enter in here. And the criteria is in the form of a CSS selector, so we're gonna point to first of all the panel-QuestionClass and then space .panel-heading. So we gonna point to all panel heading inside panel questions and just to see what that looks like let's do a console log, console.log(temp/Variable). There we go. All right, so let's hit F12 to open up our console, and here we go. So we see this NodeList. This is what our console log is triggering. So it's a node list, and if we expand that node list out, we can see three different divs with a class of panel heading. So we see that worked just fine. Now again, this won't work the same as it would if you were to target those items or selector using jQuery. So you'll have to do things a different way if you point to things using plain JavaScript. But that's how you would accomplish that particular task. Using querySelectorAll, you can enter in any CSS selector inside the quotation marks here. So thank you for watching, and I'll see you in the next lesson.

Back to the top