Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Now, this is not compatible with older browsers. But it does have a little bit better support than get elements by class name. Notice that it's supported by IE8. This is super easy to use, and probably the best way to select elements in HTML. So, I'm going to go to this HTML document and pull up the developer tools. So, I'm hitting Cmd+Option+I, that's Ctrl+Alt+I on a PC, then hitting the Esc key to pull up the console. Now, here, I'm going to type in documents.querySelector, and then put in article.
This is going to return the first element on my page that matches the selector in CSS notation. If you want to select every element that matches your selector, you can use the cousin function, querySelectorAll. Now, there's a difference between these two. This one returns an array like list with the results, and that's super important to remember because you access array-like stuff differently. So, you can do something like this, querySelector, and choose article, and then pick the childNodes, and that gives you all the children nodes of this article element, that happens to be this article element right here.
But you can't do querySelctorAll childNodes, that's because query selects are all returns on arrays. So, you have to specify which article you're referring to. Notice that when I come up here, I know that this is the first article, and this is the second article which is the featured artist section, right here. So, if I wanted to target this and get all the childNodes for this section, I have to add an array of one right here. Remember, arrays are zero index. So, element one is the seconds element, which may be what we want here. So, if I hit enter, now I can get all the featured artist children. Now, you can obviously get classes in your document like this. So, let's go to the artists page and get a list of all the artists. I'll click on artists right here, then I can do document querySelectorAll, in this case, because I want all of them.
And then, instead of typing in just the name of a tag, in quotes I can put in the name of a class, which would start with a period, and then something like artist. So, just like with CSS, you can also use things like type selectors. So, I'm going to go to the register page. And I'm going to do a document, querySelectorAll. And in here, I'm going to type in input, and then type=checkbox.
And it actually looks like I need to type in radio, because I don't have any check boxes. Let me change that to radio here. And that's going to select all of my radio elements within the form. I can also choose a descendant, so let's try something like document.querySelectorAll. And then, in here, I'll type in an ID of artists list, and then a descendant like a list item. So, I hit return, and I get all the list items within artists lists which are these elements over here.
I can also get a child, so let me add to this list item a child of image. And that gets me just the image tags. I can also ask for multiple items in the same list. I'm want to do document querySelectorAll, and then I'll ask for all the images. And after that, I'm also going to get. From the comingtoevents section, all the images as well. And that's going to give me all the images for the artists, as well as this phone right here, which is the image in the comment to event section.
So, by far, querySelector is the easiest way to get to elements. If you don't care about supporting browsers older than IE8, then you're in business. If you really want to support very old browsers, you may want to look into something called a Polyfill. A Polyfill is a way of supporting newer methods in older browsers. And here's a really good list of a bunch of HTML5 cross browser Polyfills. You can also go to this page where you can find a lot of other Polyfills. Now, if you really have to support other browsers, you should check out something like jQuery.
Which gives you a lot of other selectors. In newer browsers, you are safe with something like querySelector, and querySelectorAll.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 105433 Viewers
56 Video lessons · 117121 Viewers
71 Video lessons · 86347 Viewers
131 Video lessons · 41262 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.