Locked lesson.

Upgrade

About this lesson

How to retrieve an array-like collection of nodes.

Exercise files

Download this lesson’s related exercise files.

The Node List.docx
59.3 KB The Node List - Solution.docx
59.7 KB

Quick reference

The Node List

A node list is a list of all HTML elements of a specific type, like all p tags.

When to use

Use the node list whenever you need to find all nodes of a particular type.

Instructions

To find all nodes of a type, for instance all p tags:

var myVar = document.getElementsByTagName("p");

To determine how many p's there are:

document.write(myVar.length);

To print them all out on the screen, loop through them:

var myCounter = 0; 
while (myCounter < myVar.length) {
    document.write(myVar[myCounter].innerHTML + "<br/>");
    myCounter++;
}

Hints & tips

  • A node list is a list of HTML elements of a specific type
  • We can call .length to find out how many items are in the list
  • We can loop through them to do certain actions
  • The node list is not an actual array, but we can do some array-like things to it (like call .length)
Login to download
  • 00:04 On the last couple of videos we've been talking about DOM nodes,
  • 00:08 navigating them and creating new nodes.
  • 00:10 In this video, I wanna do an overview on the node list.
  • 00:12 So our old getElementsByTagName method,
  • 00:16 remember that, it's just this getElements.
  • 00:19 We went document.getElementsByTagName,
  • 00:23 and that will return any node of a certain type.
  • 00:26 So we can search for all the p nodes, for instance, and
  • 00:29 we would just do that by creating a variable.
  • 00:32 document.getElementsByTagName and slap a p in there.
  • 00:36 Actually lets go ahead and delete these guys.
  • 00:40 So how many p tags are there on a specific page?
  • 00:43 We only have one because this is just a very simple web page.
  • 00:46 We could easily have dozens, hundreds, however many.
  • 00:50 And how do we know which one to do something to,
  • 00:53 if we want to do something to the fourth p on our page, how do we do that?
  • 00:56 Well first of all, let's go ahead and create, second,
  • 01:02 This is 2, I don't know.
  • 01:06 So we can specify a specific p element with sort of like an index from an array.
  • 01:13 So here we're creating our myVar, we're adding all of the p's into it, and
  • 01:16 now we can call it just like this.
  • 01:18 So if we come back here and hit reload we get an object HTMLParagraphElement.
  • 01:24 And if we wanted to print this on to the screen,
  • 01:26 we could just give that a .innerhtml like we always have in the past and boom there we go.
  • 01:31 Likewise we can do it like this.
  • 01:33 And this is 2.
  • 01:36 It looks very much an array, right?
  • 01:38 But we might not know how many items are in our node list here.
  • 01:42 How many p's are there?
  • 01:43 Well, if you remember back to our array section,
  • 01:46 we can learn how many items are in the array by giving it a .length.
  • 01:50 So we can do the same thing here, just come back and get rid of this.
  • 01:54 So we can call myVar.length save this, come back and
  • 01:59 hit reload and we see two because here's one and here's another.
  • 02:03 So that's really very cool, right?
  • 02:05 Yeah but now what do we do?
  • 02:06 Well, let's say we want to print out all the p's, how would we do that?
  • 02:09 Well, that sounds like a job for a loop.
  • 02:11 And hey, we know loops, so let's build a quick loop.
  • 02:14 So, let's go var myCounter = 0.
  • 02:20 And then, while, love the while.
  • 02:24 Well, myCounter is less than myVar.length.
  • 02:29 All right, do something.
  • 02:31 And what do we wanna do?
  • 02:32 Well, let's just document.wright out the item and a line break and
  • 02:38 remember we have to increment our counters so we don't get an infinite loop.
  • 02:41 But look what we're doing here.
  • 02:42 We're calling myCounter as the index number.
  • 02:45 As the index number, the array index number, right?
  • 02:48 And that sort of a sneaky thing 'cause every time we increment the number,
  • 02:51 this will go up, and it'll print out the next item.
  • 02:54 So if we save this, come back here and hit reload, we get this.
  • 02:56 This is some text, This is 2.
  • 02:58 It's just spinning out these two.
  • 03:00 We need a line break here to get rid off this p but you get the idea.
  • 03:03 So, I'll put this code in the resource file, of course, you can just copy and
  • 03:06 paste it but it's basic While loop.
  • 03:08 So, basically what we're doing is just
  • 03:11 looping through our myVar.length array-ey type number index.
  • 03:15 And that's what's going on.
  • 03:17 Now I should note here that our node list is not an actual array.
  • 03:20 We're treating it like an array.
  • 03:21 We cheated a little bit by using the .length like we would with an array, but
  • 03:26 it´s not actually an array, it just sort of acts like an array.
  • 03:29 So we can do some array type things to it like use .length and loop through it like
  • 03:34 that, but not other array type stuff. You couldn't add items and stuff like that.
  • 03:38 You wouldn't remove items like you would remove items from an array and
  • 03:42 other things like that.
  • 03:43 So that´s the node list, you can do this for any node element.
  • 03:46 Loop through, get all of them in the list.
  • 03:49 And in the next video, we'll move away from node stuff and
  • 03:51 start talking about form validation.

Lesson notes are only available for subscribers.

Gift this course