Locked lesson.

Upgrade

About this lesson

Finding, changing, adding, and deleting elements.

Exercise files

Download this lesson’s related exercise files.

Dom Document Objects.docx
59 KB Dom Document Objects - Solution.docx
59.1 KB

Quick reference

Dom Document Objects

DOM Document Objects allow us to manipulate most aspects of an HTML page.

When to use

Anytime you want to manipulate HTML, you'll likely focus on document objects.

Instructions

There are several methods that allow us to grab DOM objects:

getElementById();
getElementsByTagName();
getElementsByClassName();

Once we grab those objects, we can manipulate them with:

.innerHTML;
.attribute;
.setAttribute(attribute, value);
.style.property;

We can create an HTML element:

document.createElement(element);

We can remove an HTML element:

document.removeChild(element);

We can append an HTML element:

document.appendChild(element);

We can replace an HTML element:

document.replaceChild(element);

Hints & tips

  • We can grab DOM objects by ID, TagName, and ClassName
  • We can manipulate DOM Objects with innerHTML, attribute, setAttribute, and style.property
  • We'll look at how to use each of these things later
Login to download
  • 00:05 In the last video we talked about DOM methods and properties.
  • 00:08 In this video I wanna talk about the DOM document object.
  • 00:11 So anytime we wanna do something with any HTML element we start out by
  • 00:15 accessing the document object.
  • 00:17 And the DOM document object basically owns all the other objects on the web page.
  • 00:21 It is the web page.
  • 00:22 It's everything on there.
  • 00:23 So there are several ways to find elements on a web page.
  • 00:27 And we've already looked at this first one as getElementsById.
  • 00:30 And that's a good one, but you see, it's looking for an ID, and
  • 00:35 not all elements have IDs, so we need other methods to find stuff as well.
  • 00:39 And so that's what we're gonna talk about in the rest of the video here.
  • 00:41 Another way to do this is the document,
  • 00:44 getElementsByTagName and then the name of the tag.
  • 00:48 And we'll go into these all in more detail as we go forward.
  • 00:51 I'm just gonna sorta talk about them very briefly in this video.
  • 00:54 The next one we have is getElementsByClassName, and
  • 00:58 then the name of the class.
  • 00:59 So we have IDs and classes.
  • 01:01 Those are both CSS things.
  • 01:02 Tag names are like p, h1 is a tag but you'll notice this very first one
  • 01:07 we've been using getElementsById, it looks for one element.
  • 01:11 You'll notice these two, they're getElements.
  • 01:14 So we're gonna see why that's significant a little bit later on.
  • 01:17 Just sort of keep that in mind.
  • 01:19 So to change elements, we've already seen this dot in our HTML.
  • 01:23 But there's a few more, too.
  • 01:25 There's .attribute and an HTML attribute, it's an HTML thing.
  • 01:30 It has to deal with HTML tag.
  • 01:32 We'll talk about it a little bit later on.
  • 01:34 If you already know HTML, you're familiar with attributes, but
  • 01:37 that allows us to change the attribute of an HTML element.
  • 01:39 There's also setAttribute, and
  • 01:43 then you can see as we start to write this out it suggests it for us.
  • 01:49 And here we have to put an attribute in a value.
  • 01:53 Basically this does the same thing as attribute,
  • 01:55 it just does it in a slightly different format.
  • 01:57 And there's reasons why you might wanna do it that way,
  • 01:59 but we won't talk about that in this video.
  • 02:01 We'll hit that in a future video.
  • 02:03 There is also a .style.property.
  • 02:08 And that changes the style of an HTML element.
  • 02:10 We'll talk about that again later on.
  • 02:15 So we can also add and delete elements.
  • 02:18 So for instance, document.createElement, and
  • 02:22 then the element name, that will create an element.
  • 02:25 Document.removeChild, and then the element name, that removes a child element.
  • 02:30 If you're familiar with HTML, you'll know what that is.
  • 02:32 If not, we'll talk about it later.
  • 02:34 There is the document.appendChild, and then the element name as an HTML element.
  • 02:39 And then there's the document.replaceChild with the element name and
  • 02:43 it replaces a HTML element.
  • 02:44 And we'll look at examples of all these things later on in future videos, but you
  • 02:48 could probably figure out sort of how to use them, just by kinda looking at them.
  • 02:52 This creates an element.
  • 02:53 This removes a child, if you're familiar with children.
  • 02:55 This appends a child, and this replaces a child.
  • 02:58 So that's a very quick view of DOM document objects.
  • 03:01 In the next video we'll look deeper at finding DOM elements.

Lesson notes are only available for subscribers.

Gift this course