Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
So, let's take a look at this in an actual document. Just to get started, I want to target this element right here. It's an image inside a list. So, I'm going to pull up the developer tools. And hit Cmd+Option+I, that's Ctrl+Alt+I on the PC, and then I hit the Escape key. I want to get to this element, so I'm going to click the magnifying glass just to make it easy for me to visualize where that element is. And select the element right here. And gives me the breadcrumbs. And I know that I can get to this element by going to the artist, list, class. And then finding any image inside it. So, I'm going to set up a variable called my node and set that to document query selector, and in here find the class of artists list and the first image. Query selector will only get us the first image in this list. If I hit enter I'll type in my node.
And, sure enough, I've got just that first image. This node has two attributes. The src attribute and the alt attribute. So, let's see what we get when we type in mynode.src. We get the location of the image file. Since these are read and write attributes, we can change the image this file is pointing to. So, I'll try mynode.src and I'll use the equal sign to set it to something else. That replaces that image with another image.
That doesn't work even though it looks like it worked, if we pulled again the node, we'll see that it didn't add that class. So, we have to use something called class name, so we can say my node dot class and then name. You can actually see it in the pop up list right here so you can pick it from that class name. Would then equal something else. Something like myclass. And now we've added that class name. Notice it's already showing up right here. But we can pull the mynode again and see that it's been added as an additional class.
And lets check out mynode, and you can see now it has the new For value. The change a Boolean value like our radio button, you can use the keyword and then a true or false or a one or a zero. So lets try that. Let's go ahead and reset mynode again, and we've got a radio button down here. Let's go ahead and target it with the magnifying glass. So, we'll just ask the query selector to go fetch an input field with the type of radio.
Now you gotta be careful how you do this one, because I can't have single quotes everywhere. I need to combine double quotes on the outside with single quotes in the inside, so that it doesn't get confused. So, let's try mynode again, and we see that it has the right input field. And what we could do here is just say mynode.checked. And we can use the value true or false here. I'll set it to zero, which will be false. That means that that element is no longer automatically selected. So, let's check mynode.
And even though that value is checked, we were able to set it to be unchecked. (UNKNOWN) notation makes it easy to select elements but because you have to stay away from reserved words, sometimes its not as easy to remember. Also with that notation there's no way to delete attributes. We'll take a look at another way of handling that in the next movie.
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.