Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
FREELessons:18Length:1.8 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.9 Selectors

Selectors are great if you want to manipulate the DOM and gain access to all its elements. To understand selectors, first let’s have a look at the window and document objects.

2.9 Selectors

Hello and welcome to lesson number 10 where we'll talk about selectors. Now, selectors are great. They give you access to the DOM and allow you to manipulate it even. And these selectors are tied really well into the document and Window objects. And if you remember from the objects lesson, an object is a collection of properties basically, properties and methods. And by using these properties and methods, you can gain access to various elements in your DOM and do various things with it. Now, in this lesson, I'm going to show you some of the more popular or well known selectors that you'll find yourself using as a web designer. So, the first thing, let's actually show you the page I have here. It's a simple demo page. We have some lists, a bunch of I.D.'s on both of these. We have four images all with a class of my, I am G. And each one with its different ID and then a couple of paragraphs. Now, let's start with this. So, I'm gonna do a console log for document.body. I'm actually opening the inspecter here right, and this gives me body. Now, body is an object can see all of its properties. You can get a lot of information about this, for example client height, client width, the inner text, the inner HTML. Down here, we have events will learn about those in the next lesson. But basically, this is a very simple way to access these properties or document images for example. Document images is gonna give you this HTML collection right. So, we have your images here, and you can learn various properties for them like the base URI. We can learn Alt the class name with height, the S R C and so on. So, by having access to these, you can actually start using selectors and manipulate them, do various things with them. So, let's see a couple of examples. Let's say, for example ,that I want to grab the very first item which is this, item one. How exactly would you do this? Well, we're gonna go right here and I'm gonna say this. Var firstItem=. We're going to get the document object, and we're gonna use the following method, getElementById and in here, we're gonna put the ID of item-1. Because that's what we have in the DOM as you can see here. ID item-1, right. So, if we do a console log for this first item, it's gonna give us the item itself. All right, so that's the first the method that I want you to remember, get element by ID. It returns the first element that it finds in the DOM with that particular ID. Now, this will all just return one element because if you want your HTML to be valid, IDs are unique, so you cannot have two elements with the CMA with the same ID. So, that's why this method, this function basically it returns a single element. Okay, now let's say that you want to get access to these two ULs. So they both have the class of my list. Well to get elements of the same class, you would do documents. Get elements plural by class name. And we're going to say my list. So now, my list gives me these two unordered lists. What about getting elements by their tag name which means we get all the images, all the paragraphs. Well that's also easy to do. We're gonna say for example paragraph = document getsElementsByTagName p paragraph and that's gonna select these three paragraphs here. Now, if you've used jQuery, you remember how you would do selectors there. You would do something very close to CSS selectors, right? Well, you have something similar in Vanilla JavaScript and that's with a method called querySelectorAll. So, for example, let's say that I want to select all the images. Well I can just say images = document.querySelectorAll. And I would pass in a CSS selector, in my case it's img and that will select all the images. Okay, so now, you have all of these variables which reference objects or elements in your page. How do you manipulate them? Well, first of all, you can start with the CSS properties by using the style property. So you would say something like for example first item. You would say style.color and you would change that to something else, for example red. So now, the first item is a red. Then what if you want to hide this second list? Well let's think about it. My list is actually an array. That’s what get elements by class name retrieves. So, it's an array. You’re going to access it like this, myList. You're going to pass in an index. I'm gonna say one because we have two items, and it's a zero based index that we have zero and one. So, my list one style.display = "none". And that will essentially hide my second list. Then, let's say that I wanna change the color of all of my paragraphs to green. Well, you can do it by hand, or you can use a loop. So, for example we're going to say for var i=0, i< paragraphs.length. Paragraphs.length works here because paragraphs is an array. i++ when I say paragraphs [i] style color green. So now, all of these paragraphs are green, and that's how you can manipulate the DOM using selectors and a loop. Now, the list here can go on and on, but these are the basics and this is what most people use. This is what we'll mostly be using Using to access elements in your DOM. And we're gonna leave it at this. You're gonna see more complex examples when we get to the to demos at the end of this course. Now, JavaScript also allows us to work with events and that's what we'll be learning in the next lesson. See you there.

Back to the top