Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In this chapter I'm going to go over the different methods for selecting DOM elements. By far the most common is the getElementById method. It allows you to select and element in the HTML file that is a tag that has a single ID attribute. getElementById() expects to find only one ID since an ID should appear only once in each document. One common error that happens when accessing DOM elements is that people type in getElementsById(), with an s, so make sure you watch out for that.
I really got to use a console.dir instead of console log. It can help you find the methods and properties available to every node in the DOM. So lets take a look at the DOM for a website in the console. I got this page opened up on a browser and I am going to hit Cmd+Option+I to enter the developer tools in Google chrome. Now I'm in the Console tab but you can switch to the Element tabs if you want to and take a look at the structure of this document. It's pretty simple. Just an HTML document with a body that has a wrapper, then a header and some sections as well as a footer.
So to use this method, you simply attach it to the document node since that's the topmost element. I'm going to hit the Esc key to pull up a console in the Elements tab. And I'm going to type in document dot get element by ID, and I can see that the body tag of this document has an ID of page home, so I can use that. So I'll type in page underscore home, and go ahead and hit the Return character. And now I see only that node. And now I can access only this specific node.
So I can open it up, just like in the elements tab up here, but I can see just the data for that node. So right now this is the same as doing document body, but with this method, you can target any element in the DOM with an ID. So let's try to target the coming to events section which is right here. A quick way to find out the structure of a specific element is by clicking on this magnifying glass and then clicking on the element. So I'll click anywhere on this element, I'll do the headline. And now right here I can see the path to that item.
So I know that this headline is underneath an article with an ID of coming to event. So I can type in document, get element, by ID, and type in the name, coming to event. When I hit Return I get just that node. Now its super typical to assign this node to a variable so you can do something like create a variable call it mynode. And make it equal to document.getElementbyId and then coming to event. Now whenever I want to access that node, I just need to type the name of it in the console.
Now this is the XML view of the node. If I want to see all the properties and methods for this node, I can type in the DIR command and pass it mynode. Now this shows me the same element, but I can see all the methods and properties available to this node. There's all kind of good stuff in here. So you can access, for example, the first child property. So let's try accessing this. We'll go all the way to the bottom and we'll just save my node dot first child. This comes up as having a text node as the first element. This is probably not what you expected, and that's because, in the HTML that we typed in for this document, we have a carriage return. And it's picking that up as the child of node instead of the H2 element. So if we take a look at child nodes, let's try. My node.child nodes.
You can see that there is many elements. The first one is a text element and then the second one is actually the age two tag. You can see that there is also other text nodes right here and those are probably carriage returns. Don't worry that these appear there right now. We'll cover how to access some of these other properties and methods in an easier way later. For right now, make sure you spend some time playing around to access different IDs on your page using the magnifying glass. And also try playing around with some of the properties on the notes that you grab
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 101019 Viewers
61 Video lessons · 87812 Viewers
71 Video lessons · 71686 Viewers
56 Video lessons · 103575 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.
Your file was successfully uploaded.