Locked lesson.

Upgrade

About this lesson

Finding elements by ID, by tag name, by class name, by CSS selectors, and by collections.

Exercise files

Download this lesson’s related exercise files.

Finding Dom Elements.docx
59 KB Finding Dom Elements - Solution.docx
59.1 KB

Quick reference

Finding Dom Elements

We've looked at several DOM methods. In this video we'll learn how to use them.

When to use

This is another method for manipulating DOM elements.

Instructions

To use getElementsByTagName():

myVar = document.getElementsByTagName("h1");
document.write(myVar[0].innerHTML);

To use document.getElementsByClassName():

myVar = document.getElementsByClassName("name");
document.write(myVar[0].innerHTML);

The list of HTML Object Collections:

document.title
document.anchors
document.body
document.forms
document.head
document.images
document.links
document.scripts

Hints & tips

  • Remember, to access items in getElementsByTagName() and getElementsByClassName() you have to reference index numbers
Login to download
  • 00:05 In the last video,
  • 00:06 I talked about the different DOM document objects used to find HTML element.
  • 00:10 In this video, I wanna continue by giving you some examples of each of those things.
  • 00:14 So we know that we can find HTML elements by ID, tag name,
  • 00:18 class name, and HTML objects.
  • 00:21 So let's look at each of those.
  • 00:22 We've already seen that we can get an element by its ID.
  • 00:25 So this is the getElementById, it's grabbing the first,
  • 00:29 slapping it into a variable.
  • 00:31 So that's obviously gonna return an object into the myVariable variable,
  • 00:35 which we can call with documentWrite, and
  • 00:37 just call the variable, slap an .innerHTML onto that and we're good to go.
  • 00:41 So we can also search by tag name.
  • 00:42 And it looks like this document.getElementsByTagName("h1").
  • 00:46 You see we have this h1 tag.
  • 00:49 Here's the difference, when we write it out it looks a little bit differently.
  • 00:52 We've got the myVariable but then we've put this,
  • 00:55 it looks very much like an array.
  • 00:57 And we're calling the 0th item in an array.
  • 01:00 And now why are we doing that?
  • 01:01 Well, first, let's save this and see what it does.
  • 01:03 It grabs this text and spits it out on the screen.
  • 01:06 But why are we doing this array thing?
  • 01:07 Well, remember in the last couple videos ago, I told you to look for
  • 01:11 the s on there, the plural.
  • 01:12 Get elements, right?
  • 01:14 On an HTML page, you could have dozens of h1 tags, and this is grabbing all of them.
  • 01:19 And then to access them,
  • 01:20 to output them on the screen, you have to tell our program which one to spit out.
  • 01:25 And we're spitting out the first one.
  • 01:27 Or the 0th one.
  • 01:28 Just like with arrays, the first one is zero.
  • 01:30 So in fact if we come here and go h2 something and
  • 01:34 then change this to the second one.
  • 01:37 It would spit out the second one.
  • 01:40 So that's very interesting.
  • 01:46 So the next one we wanna look at is class, class name, and
  • 01:51 that's get elements by class name.
  • 01:53 And again, it's plural, so again, we have to do this sort of array-ey looking thing.
  • 01:58 And now we're looking for a class name first.
  • 02:01 And if we save this and
  • 02:02 hit reload, we get nothing because we have no classes called first.
  • 02:06 If we come up here and change this id to a class, and then put something here.
  • 02:15 Save this and hit reload.
  • 02:16 Now we're gonna get something.
  • 02:17 But otherwise, we wouldn't get anything.
  • 02:19 And that's how all these work.
  • 02:20 If they don't find anything, it just returns null.
  • 02:22 It returns nothing.
  • 02:23 Okay, so finally we can find elements by HTML object collections.
  • 02:28 And there's a bunch of objects that we can search by.
  • 02:30 For instance, the title of a web page, you see up here?
  • 02:33 We could search by element tag and search for
  • 02:36 titles, or we could just, let's see, let's remove this.
  • 02:41 We could just search for document.title, and that's an HTML object.
  • 02:46 So if we come back here and hit Reload, we see My Website.
  • 02:50 Because up here, My Website, that's the title, that's the title, right?
  • 02:55 So like I said, there's a bunch of these objects we can search for, and
  • 02:58 I'm just gonna copy and paste them here, so you can take a look.
  • 03:00 And I'll put these in the resource file.
  • 03:03 Tab these over for you.
  • 03:04 So we have document.anchors, document.body, .forms, heads, images,
  • 03:09 links scripts and titles.
  • 03:10 Now each of these work slightly differently right?
  • 03:13 They're not all as easy as slapping on a document.title and
  • 03:16 having it work because there may be lots of anchors.
  • 03:19 There may be lots of forms.
  • 03:21 There may be lots of images.
  • 03:22 So you kind of have do some funny things to get some of these to work.
  • 03:26 And in fact,
  • 03:27 I can show you how this is weird by, let's try the body one real quick here.
  • 03:32 So if we save this, come back here and hit reload, we get this.
  • 03:36 Let's try enter HTML.
  • 03:40 Boom, so we get this really weird, 'cause it's calling the body.
  • 03:44 It's outputting our body and then it sees that the body is now this, so
  • 03:48 it's outputting this, and then it sees that it's that and
  • 03:50 it just sorta like an infinite loop almost.
  • 03:52 So like I said, these are all kind of weird.
  • 03:54 Some of them work weirdly, some of them work normally.
  • 03:57 You can do some research and just see yourself how each of these work.
  • 04:00 I'll leave that up to you.
  • 04:01 It's pretty trivial for
  • 04:02 you to look up each of these if you ever want to use them.
  • 04:04 Personally I don't use these tags very often I'll just use the getElementsByTag
  • 04:08 method that we looked at just a minute ago.
  • 04:10 So anyway, those are the basic ways to find DOM elements.
  • 04:13 In the next video, we'll look at changing HTML output content and attributes.

Lesson notes are only available for subscribers.

Gift this course