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

  • Overview
  • Transcript

2.1 Targeting Elements by ID and Class Name

In this lesson, I will show you how to use a few JavaScript methods to target elements on the page using their ids and class names.

Useful Links

2.1 Targeting Elements by ID and Class Name

Hello and welcome back. Over the next few lessons, we're gonna be taking a look at this FAQ page. And we're gonna take away some of the jQuery programming that we've done on this page. And we're going to replace it with plain JavaScript, so that I can prove to you that you can accomplish a lot using plain JavaScript. And it's only a little bit more challenging than using jQuery. So, as you can see, we are using jQuery selectors here to point to all of our items, and we're also using some jQuery functions like hide, show and on. We're also using removeClass and addClass as well as the parent method. These are all jQuery methods here. And we're gonna talk about how we can achieve all of the same functionality here using plain JavaScript instead. So in our FAQ section, you can see that we can click on different areas, or different headers here on these panels, and it will collapse all of the other panels and expand out the panel that we clicked on. If we look in our HTML, we can see that our markup consists of three main sections here. So we have this FAQ section, and in that section we have three divs with a class of panel-question. This first panel also has a class of active, because by default, when the page first loads, this is the one that we want expanded out. So we have this active on first, and inside these panel-question divs, we have a div with a class of panel-heading, which is this section with a dark background. And then a div with a class of panel body, which is where the answer is contained with the white background. So you can find the URL for this particular CodePen and the course note for this lesson. Once you've opened up, click on the fork button to create a new copy of that. And we'll get started with this new copy. So in this pen, again, we've got several jQuery items, there are several objects that we're pointing to using a jQuery. And in this lesson, I wanna focus on pointing to these items using plain JavaScript instead. So let's start with our collapse button. Now, right now there's no functionality for that collapse button, but it's this button in the upper right-hand corner that will collapse everything. And we can create an event for that if we want. It's pretty simple, $btnCollapse.on, and this is gonna be a click event. When we click on that, we want to collapse all of our items. And we already have some code for that. That's this answer variable here, which is pointing to the panel body, which again is the answer section of each of these questions. And if we just point to answer, and then in jQuery do a dot hide, then that will get rid of them. So let's just copy that and paste it here, and that should do it for us. So I'm gonna save that and hit Collapse All. And there we go, now we can see they're all collapsed. And then we can through and click on them individually to open them up again. Okay, so let's talk about how we would point to this collapse button using plain JavaScript instead of jQuery. So I'm gonna go to the next line. I'm gonna create another variable called btnCollapse but without the dollar sign. And the way we point to an element using its ID, which is what we doing here, that's what this hashtag is for. The way we do that in plain JavaScript is we point to document., and then there is a method called getElement, singular, ById, now make sure you get all the right things capitalized. It starts off lowercase and then every word after that starts with a capital letter. So we have document.getElementById, and then inside parentheses and inside quotation marks, we will the type in the name of the ID that we are looking for. Nnow in this case we're not gonna put the hashtag there, this is not a CSS selector, instead we're just typing in the name of the ID. So, btnCollapse, and there we go. So lets take a look at our console to see what these two items look like. So, I'm gonna do a console log, console.log. And first, we are gonna do $btnCollapse with a dollar sign in front of it. And then second, lets just copy this and paste it and get rid of dollar sign. And you'll notice that I put a string here first because I want to see in the console the actual string $btnCollapse and then after that we'll see what that looks like in JavaScript. So, let's save that, and then if we hit F12 to open up our developer tools in Chrome, and then click on the consul tab to make sure it's open, and then well expand this out a little bit, we can see our console logs here. So our first one, here we have $btnCollapse. This is what that looks like, right here. And we can expand that out by clicking on this little triangle to see more information on it. Now the btnCollapse without the dollar sign, you'll notice it looks a little bit different in the console. Here we see the actual HTML for that button. So both of these methods of pointing to an object, a dumb element, both of them will work but you'll notice that both of them work a little bit differently. Now we're not gonna into a lot of detail on how they're different but I wanted to point out that they are different, and we can even do this. Let's get rid of this first one, and instead of putting the string here at the beginning. I'm just going to see, I'm gonna compare this, and see if $ btnCollapse is equal to just plain bntCollapse. And when our code refreshes, we see at the bottom that we got a false, which means that these two are not the same thing. And, again, the reason I wanna point that out you is because you need to understand that even though we're pointing to the same element with these two methods, we can't expect everything that we do with this item, this jQuery item, we can't expect to be able to do the same thing to this non-jQuery item. So down here, where we have this $btnCollapse.on, we couldn't do that with the plain JavaScript btnCollapse. If I were to get rid of this dollar sign here and then tried to click on Collapse All, you'll see that it doesn't work. In fact, we can see in our console that btnCollapse.on is not a function. We have to actually have a jQuery object that we're pointing to here. So if we put that dollar sign back then our code will suddenly start working again, and we can collapse everything. So, again, it's important to understand that these two methods of pointing two DOM elements, they're both effective, but we have to do things a different way if we're going to use jQuery versus if we're going to use plain JavaScript. And our whole goal here is to get rid of jQuery anyway. Not that jQuery's a bad thing, but sometimes you don't necessarily need it. So we're gonna find a different way to achieve what we're doing anyways, but I wanted to point that out, these are not the same types of objects. But again, this getElementById is how you would point to an element on the screen or in your HTML using plain JavaScript. Now, before we move on, let me go ahead and point out how we would do that using a class name. Obviously, getElementById is not going to work if we're pointing to a class name. So we have these three items here that are pointing to class names. And let's create versions of them. So we have var question without the dollar sign. And here we're still gonna point to document, but instead of getElementbyId, there's another method, lowercase g here, getElements, plural, ByClassName. And that will get all of the elements in your document that have whatever class name you enter in here. So, inside quotation marks here, we're gonna type in our class name, again, this time without then dot in front of it. And we're gonna point to panel.question. So again, it's very similar to the document.getElementById but it's getElements, plural, don't forget the s at the end of the elementsByClassName. And then we can do the same thing for heading and answer. So var heading = document.getElementsByClassName, and here we're reporting to panel-heading, again, without the dot in front of it, because this is no longer a CSS selector we're using, it's just the class name we're entering. So do the same thing here for answer. And we'll do document.getElementsByClassName, and this time we're pointing to the class of panel-body. So, again, those are two simple ways that you can access elements using plain JavaScript instead of jQuery. As we move forward, we're gonna talk about different ways that we can point to other objects, as well as eventually how to achieve some of these same effects using these JavaScript objects that we've created. So thank you for watching and I'll see you in the next lesson.

Back to the top