DOM Methods and Properties

Quick reference

• 00:05 Okay in this video, I wanna talk about DOM methods and properties.
• 00:08 We talked a little bit about DOM in the last video,
• 00:10 now I wanna expand a bit as we move forward.
• 00:13 So DOM methods are basically actions that you can perform, and
• 00:16 you perform them on HTML elements, so methods, actions.
• 00:20 Likewise DOM properties are basically values.
• 00:23 That you could set or change or whatever.
• 00:26 And those values are HTML elements.
• 00:28 So when we want to do some action, add or delete an element, or something like that,
• 00:32 we're dealing with DOM methods.
• 00:33 And when we want to change the content of some element,
• 00:35 we're dealing with a property.
• 00:36 Like I said earlier, when we deal with DOM stuff,
• 00:39 we're almost always going to be dealing with HTML elements.
• 00:41 And in the DOM, those elements are defined as objects.
• 00:44 And we can object-y type things to them.
• 00:47 Remember several videos back, we talked about JavaScript objects.
• 00:50 There's all kinda of object-y type things you can do.
• 00:53 Using DOM things as objects if very useful,
• 00:55 and we'll see how to that as we go along.
• 00:57 So for example, in the last video,
• 00:58 we looked at this bit of code and we have this p id with nothing in it and
• 01:03 we have this basic line here and when we save this and hit reload.
• 01:07 It just basically is popping this text on to the screen that's Hello World stuff.
• 01:11 So, let's take a look at this in a little bit more detail.
• 01:13 In this example here, this get element by ID, that's a method, right?
• 01:19 It's trying to find an element and it's finding it by id named first.
• 01:23 And that's just this element right here.
• 01:25 So that's a method example.
• 01:26 This innerHTML is an example of a property.
• 01:30 We want to change something.
• 01:31 We're changing this property to this text right here.
• 01:34 And we will often use innerHTML to get the content of an element.
• 01:38 And to replace that content too.
• 01:39 And the reason why we can grab just about any HTML element with this innerHTML thing
• 01:44 and it's just super useful so let's look at our example again and
• 01:47 change it around a little bit. First, I'm gonna come up here to this p tag and
• 01:51 I'm just gonna put in some text, this is some text, and
• 01:55 then I'm going to change this around a little bit.
• 01:58 actually, I'm just going to go, let's put this in a variable,
• 02:02 myVariable = and let's take this bit off.
• 02:08 And then let's go to document.write and just write out myVariable to the screen.
• 02:15 So what we're doing here is we're saying hey go find this thing,
• 02:19 find this element, grab the text that's on the inside of it here and
• 02:23 slap it into this variable and then write out this variable to the screen.
• 02:26 So if we come back here, boom, this is some text, this is some text.
• 02:29 It's twice, because we printed it to the screen once and then down here,
• 02:33 we grabbed it a second time and printed it out again.
• 02:35 That's very cool, that's a good way to grab things, but check this out.
• 02:38 If we take off this .innerHTML and save it, now what we're doing is
• 02:43 we're saying hey, just go look for this ID, and grab the ID itself.
• 02:46 Not the text on the inside just the id.
• 02:48 So if we save this and come back and hit reload we see this is very interesting.
• 02:51 It says object because remember these things become objects.
• 02:55 We can do object-y things to them and its telling you what kind of object.
• 02:58 It's an HTML paragraph element and its what the p stands for, paragraph.
• 03:02 So that is really, really cool, but it's slapped it into this variable and
• 03:06 now we can do object-y things to that variable.
• 03:08 So I can call .innerHTML on the variable itself.
• 03:13 Save this thing, come back and hit reload and boom now we've got the inner HTML.
• 03:17 Likewise we can do that same thing up here .innerHTML and get the same result.
• 03:24 Yeah very,very neat, so that's a quick intro to DOM methods and properties.
• 03:29 I just sorta wanna clarify the terminology, so you're thinking methods,
• 03:32 you're thinking properties, you're thinking content and actions.
• 03:35 This will become more clear as we move along,
• 03:37 I just wanna give a quick intro on this.
• 03:39 In the next video we'll continue on with the DOM document objects and
• 03:42 we'll learn how to find, change, add, and delete different elements.

Lesson notes are only available for subscribers.