Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
Every DOM element has a few important properties you can use to identify the node. So we're going to take a look at some of those properties in this movie. So, for example, the nodeType property gives you a numerical value of a node. The nodeName property gives you the name of the node, usually the tagName. So for example an anchor tag would have a type of A. Node.atrributes is a how you can access attributes inside a node. So if you were inside an anchor tag you could ask for a list of attributes and get the href attribute. Also the node value let's you access an element inside a node. So let's take a look at these in an actual document. So here we are in our sample file.
I'm going to hit Cmd+Option+I, Ctrl+Alt+I on the PC and then hit the Esc key to pull up the console. So I'll start out by creating a variable called myNode, and then assigning it an element in our page. In this case, I'm going to choose the last link in our navigation menu, which is right here, so we'll type in document.querySelectorAll. Find the navigation list item anchor tags. And then choose the last element, happens to be element number 4.
So, once that's in a variable, I can type that in. And note that I have to write element. Now, let's type in myNode.nodeType. So that it's returning a value of one. You get a one because this is a normal element to node. Each node in the dome has different node type. It can be anything from a element to a text attribute or other node. You can find out more about node types on this page right here.
If you scroll down here to the bottom you can see the type of node types by numbers. So that notices that a normal element node is type number one. You have attribute nodes, text nodes, and then a bunch of other sort of weird nodes. You're definitely going to use element nodes, attribute nodes, and text nodes. You can also find out what a node is, by asking for the node name. So this is telling you that this is an A element, or an anchor tag. Now you can get to any attribute within this node by using the attributes array. So I can say myNodes.attributes. And now it's giving you a list of the attributes inside that node. Notice that I only have one attribute here called href, so it's only returning one item which is right here.
So to get to that, we would type in myNode attributes and then the 0 element. Now we can find out the node type of this attribute as well. So we can say something like this and then say nodeType and notice that this is type 2. And if you remember from this page, type 2 is an attribute node. You can also get the node name, and that returns the fact that this is the atra function. So sometimes you want to get to all the properties or attribute within a node, and you can access them through this array.
Now if you want to, you can go one level deeper and get to the text of the link. So I'm going to say, myNode first child. Now the first shell seems to be the text for this link, called register. But let's make sure and try typing in the nodeType. Now this is type 3 so we'll go back into our list of nodes here and note that this is a textNode, it's not text, but a textNode. So you may think that you can do something like mynode.firstChild and set it something like registration to change the text inside that first link.
That doesn't work. That's because the first child of the node is a node of type of text node. It's not a text element so its not real text so its just another node. Like another element inside our DOM tree. To actually get to the text we have to type in myNode.firstChild and then use the nodeValue attribute. Then we can set that something like registration and that changes our link right here. What you have to remember is that technically everything in the dom is a node including text elements. So to get to the text of a node we have to use the first child and then we have to access the value by going to the node value property. So as you learn to manage and control your nodes, you'll need to get familiar with these different properties.
They'll let you not only access but also manipulate your DOM nodes.
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.