Intro to the HTML DOM

Quick reference

• 00:04 In this video, I want to start to talk about something called the HTML DOM,
• 00:08 that's D-O-M.
• 00:09 And a big part of JavaScript for web development has to do
• 00:13 with manipulating the HTML DOM, but most people don't even know what the DOM is.
• 00:18 So DOM stands for Document Object Model, and basically,
• 00:22 it's the HTML of a webpage, in sort of tree format.
• 00:26 And we can actually head over real quick to, let's go to Wikipedia.
• 00:29 And we can type in dom, and here we go, Document Object Model.
• 00:34 And you can read about this, if you really want to.
• 00:36 I'm just gonna pull up this picture.
• 00:38 So, when we think about the DOM, we usually think about it as a tree.
• 00:41 And we have the root HTML and then we have the different elements and attributes.
• 00:45 So, an attribute might be href for link.
• 00:48 An element might be head,
• 00:50 title, body, h1, all the other HTML elements you can think of.
• 00:54 With JavaScript we can basically manipulate any of those things,
• 00:57 and that's really cool.
• 00:59 So, we can manipulate HTML elements and attributes.
• 01:02 We can manipulate CSS styles on the page.
• 01:05 We can remove HTML elements and attributes.
• 01:08 We can add new ones that aren't even there.
• 01:10 We can react to certain events and basically messing with the DOM allows us
• 01:14 to get, change, add or delete HTML elements.
• 01:17 So let's come back here.
• 01:18 We've already started messing around with DOM a little bit way back at the beginning
• 01:21 of this course.
• 01:22 You probably forgot about it by now but we had this p tag, and we called it first.
• 01:27 And there wasn't anything inside of the tag, it was just an empty p tag.
• 01:30 And then, if you remember, you probably don't, it's been a while but we had,
• 01:34 we had a script, and
• 01:37 it was just this document get element by ID first and then print out hello world.
• 01:43 So notice this id, we named this id first and we referenced it right there.
• 01:48 And if we save this, come back here and
• 01:49 hit reload we get this little hello world thing.
• 01:52 But you notice there's nothing here, right?
• 01:56 So when the page is created there's nothing there, but we're
• 01:59 creating it on the fly by manipulating the DOM with this line of code.
• 02:03 So that's the DOM in a nutshell.
• 02:05 Like I said, in front end web development you have HTML, CSS, and JavaScript,
• 02:09 and the three interact together to do what we call front-end web development.
• 02:13 And so often what we're doing with JavaScript,
• 02:17 is manipulating these different DOM elements.
• 02:20 So we're gonna be spending the next, quite a few videos, the next ten videos or
• 02:24 so, talking about different aspects of the DOM, learning about different ways to
• 02:28 manipulate things, and do some really cool things.
• 02:30 Yeah, it's gonna be a lot of fun.
• 02:32 In the last few videos, the first half of this course we learned JavaScript itself,
• 02:36 the programming language, now we're gonna be learning how to take that programming
• 02:40 language and manipulate DOM elements.
• 02:42 And we'll do some other things as well.
• 02:44 But that's gonna be the next few videos.
• 02:46 So anyway, in the next video we'll start to dive deeper, learn more about the DOM,
• 02:50 we're gonna start to talk about DOM methods and properties.

Lesson notes are only available for subscribers.