Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Traditionally, the easiest way to get to an element is by ID, but you probably don't have an ID for every element in the DOM, or at least you probably shouldn't. If getElementsByID is the most popular way to access things, then getElementsByTagName is the next most popular. GetElementsByTagName lets you access elements by their HTML tags. It's super simple to use and returns an array. So, notice that there is an extra S here. So, althought it's different than getElementbyId, it can be used with it to create complex targets.
So let's take a look. So I'm going to come here to my documents and I'm going to pull up the console. So I'm going to hit Cmd+Option+I, and then I'm going to hit the Esc key. I'm on a Mac, so that would be Ctrl+Option+I on a PC. So from here I can type in something like documents get elements by tag name. And then ask for a specific tag. So I'll ask for the List Item tag, and hit Return. Notice that I get an array like element with a bunch of list items, and I can open them up right here individually. So I can tell that this is the Home element right here, this little Home link.
And if I get down further, I should see some other element. So this is an artist's photo, I scroll up you can see it. And actually I can select it from right here, I can tell that it's a little bit further down. So that's that photo right there. So, it grabbed every single list item in my document. And that's sort of useful but, it could be a little bit better because we can target a specific list item if one of its containers has an I.D. So, if I wanted to go to this section of featured artists, I'm going to hit on this magnifying glass and click on one of these.
Just so I can learn the pathway here. Here's the path. I know that this has an ID of featured artists. So I can combine the document, get element by ID, and ask for first the list of featured artists. And then, within that, ask for the getElements by tag name so that it returns only the list items within the ID of feature artists. So if I hit Return I get just the list of my artists. It's tough to keep on typing that so I'm going to put it in a variable called my node.
And then I'm going to copy this right here. So now, this is assigned to a variable that I can simply call by typing the name. To get to individual elements, you can use an array notation. So I can say, my node and then ask for a specific element, this happens to be the third artist. Remember that arrays are 0 index, so item 2 is actually the third item. So, I can also type it in in its longer form like this, gets me the same element. Every list element of the featured artists has an image tag underneath it. So, we can easily get to it using the first child attribute and we just type my node, the shortened version and type in .firstchild.
Now I have to make sure that I specify which node by typing in the array notation and then .first child. So being able to access node elements by tag name can be super handy, especially when you combine it with get element by id.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 100136 Viewers
56 Video lessons · 113162 Viewers
71 Video lessons · 82028 Viewers
131 Video lessons · 39359 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.