Navigating DOM Nodes

Quick reference

• 00:04 Okay, in this video, I want to talk about DOM nodes and how to navigate them.
• 00:09 So, what exactly is a node?
• 00:11 And it's just N-O-D-E, node.
• 00:13 So, basically in the DOM everything in our HTML document is in node.
• 00:17 Every HTML element is an element node.
• 00:20 All the text inside of each element are text nodes,
• 00:23 all the attributes are attribute nodes, and on and on.
• 00:26 So, we've already looked at a lot of these, we just haven't called them nodes.
• 00:29 We've been calling them elements or whatever, but they're the same thing.
• 00:32 So think of our HTML document as a big tree, and you can sorta see,
• 00:36 here's the root of the tree, and then here's a branch, and here's a branch,
• 00:40 here's a branch, here's a branch.
• 00:41 These branches go with this branch then break off and things like that.
• 00:45 So, each of these branches are basically a node, and
• 00:48 we can travel down those branches with JavaScript.
• 00:51 Basically, it's a way to do the same things we've been doing with getElementById, but
• 00:56 instead of searching by ID we're gonna search by nodes.
• 00:59 It's just another way to do it, sometimes it's appropriate to do it the way we've
• 01:02 learned already, sometimes it's appropriate to do it this way.
• 01:05 And you'll sorta learn which is best as you sorta get more experience.
• 01:09 Sometimes it's just easier to use one way or
• 01:11 another based on whatever you're trying to do.
• 01:13 So basically, when we're talking about a tree, this is a hierarchy, and
• 01:16 a hierarchy is made up of parents and children.
• 01:19 So, this head is a parent, this title is a child of the head tag.
• 01:23 This head is a child of the HTML tag, and on and on.
• 01:26 So it's a hierarchy.
• 01:28 That allows us to traverse each of those nodes very easily.
• 01:31 So, even down on this level, this text right here is a child of the p node.
• 01:37 So, even text is a child, or a sibling, or whatever.
• 01:41 I should mention siblings.
• 01:42 Siblings have the same parent, right?
• 01:45 So the body and the head are siblings 'cause their parent is both HTML.
• 01:49 So, we can navigate the parent-child relationships with these properties.
• 01:53 And I'm just gonna copy and paste these right here.
• 01:56 So we can take a look at these.
• 01:57 We have a parent node, we have child nodes and then the number.
• 02:01 We have a first child, last child, next sibling and previous sibling.
• 02:06 So what are all this things?
• 02:07 Let's look at our p tag and, like I said, the text here is a child of p, right?
• 02:14 In the past, we have accessed that with, we'd just call,
• 02:18 you know, slapping in a variable, maybe.
• 02:21 We'd do this document.getElementById.
• 02:22 We'd search by first.
• 02:24 We'd use the innerHTML and we'd grab that text.
• 02:26 So, that's definitely a way to do it, but here is how we'd do it with nodes.
• 02:31 Let's go to ahead and delete that.
• 02:33 Same way, slap this into a variable or not, whatever you're doing.
• 02:36 But it's document.getElementById.
• 02:38 Same thing we're gonna call first, and
• 02:40 then, this bit at the end here is a little bit different.
• 02:42 We're calling the firstChild, and that's this guy right here, right?
• 02:47 And we want its node value, so
• 02:49 instead of .innerHTML, we want the node value, 'cause it's a node, we want its value.
• 02:54 So, like anything else,
• 02:57 we can do a document.write, and call myVariable.
• 03:04 And let's delete these real quick.
• 03:08 Come back here and hit reload and boom.
• 03:09 We get just like we would expect.
• 03:12 So we print this out again.
• 03:13 We called firstChild.
• 03:14 We could also call it lastChild and get the same thing.
• 03:17 Why?
• 03:18 Because this is the first child of p, but
• 03:21 it's also the last child 'cause there's nothing else there.
• 03:23 So if we save this, come back here and hit reload,
• 03:26 we're gonna get the same exact thing.
• 03:28 Instead of first or last, we could call out the actual child number.
• 03:32 And we would just do childNodes[0]nodeValue, and
• 03:35 this is the same sort of array-y-looking,
• 03:38 this is the 0th item of our array, which is the first item.
• 03:42 Save this and hit reload.
• 03:43 We're going to get the same exact thing there.
• 03:44 So if you know how many, exactly, how many children are in a node, and
• 03:48 you want to call the third one, you would do childNodes[2], just like with arrays.
• 03:52 Finally, we can do the siblings.
• 03:54 Let's us see our list again.
• 03:55 We've looked at firstChild, lastNode, childNodes, these nextSibling or
• 03:59 previousSibling.
• 04:00 These are slightly different.
• 04:01 We're actually call in our HTML for these, for a reason we don't really care about,
• 04:05 but it's the same thing.
• 04:06 You just slap in this nextSibling and the previousSibling.
• 04:08 So, those are nodes.
• 04:10 Make a note of this list,
• 04:11 I'll put it in the resource file and you can reference back to it.
• 04:14 It's just another way, like I said, of finding elements in an HTML page and
• 04:18 sometimes one way is more appropriate than the other.
• 04:20 They're both pretty simple, but
• 04:21 in the next video we'll look at creating new nodes.

Lesson notes are only available for subscribers.