Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In the last movie, we talked about basic access properties for node elements and the problem with traversing the DOM nodes using child nodes. Sometimes you get text elements that are just carriage returns. Some browsers support a better way of selecting elements. So, for example, you can use the property called first element child, and that gives you the first child only if it's an element. Like a tag. So, it would ignore any comment or text nodes. You can also use, of course, last element child and children.
Which gives you only children that are elements. Of course, you can also use previous element sibling and next element sibling that's the equivalent of the previous sibling and next sibling. Now, before you get too excited about this, this has really lousy browser support. So, if you go to this page and you take a look at this right here, it's showing you that its available in IE 9 but not in some versions of Firefox. So, it's something good to use for newer browser support but not something you should be using if you want to be totally backwards compatible.
So, let's take a look at some of these. So, I'm in my document. I already have the consulant open. So, I'll click right here on the magnifying glass and we'll click on this element that shows me the path. And if I do my node, you can see that we have only the first list item over here. So, you can see that my node.parent node. We get the entire list. Now, if we do my node.parent node, and then try to get the child nodes of this element, we're going to get everything including every carriage return.
Now, if we do only parent node than that children, we're only going to get the children that are elements. So, it's going to ignore all these characters right here, which is pretty awesome. Of course, you could do my node parent node, and then do first child. That gives you the first text element. But if you do first element child, it will ignore the first text element and give you only this element right here. And the same way you can use my node, parent node and then last element child.
And that gives you only the last element, getting rid of any text nodes. And, of course, you can traverse through the different nodes using next element sibling and previous element sibling. Now notice that we didn't have to do anything special for parent node. And that's because a text element or a comment cannot have any children by definition. So, pairing node is always going to return an element. So, although this is a great way of selecting just elements, you need to ask yourself if you're willing to sacrifice some support in older browsers.
Get unlimited access to all courses for just $25/month.Become a member