The DOM

[00:00:00]
>> So let us recap a little bit about JavaScript and the DOM. First of all, can anybody tell me what DOM stands for, yeah?
>> Document object model.
>> Document object model, huzzah, exactly. So, the document object model is sort of, as we just discovered before, the way that JavaScript can kind of conceive of what is happening in the HTML document that's being browsed.

[00:00:32]
Is that a, can we passively, can a page be browsed? I don't know, but yes. The connection between JavaScript and HTML is what we're thinking about here. So, we probably are familiar with the global document, little case d, document. If you haven't run into it, this is essentially a reference that JavaScript in the client gets to the HTML document that is in the current page.

[00:01:02]
So that little reference document, which we're gonna talk a little bit more about later, gives us all kinds of handy-dandy tools and tricks and things. For example, we can call its method getElementById with a particular ID to retrieve that element and then do things with it. We can also use query selectors the same as you would in CSS file, to select for all of the documents, while ideally there is only one with the same ID.

[00:01:34]
But perhaps all of the span documents in your entire page or something like that. And we can access the overall, the kind of HTML [LAUGH] document element with the document element property. There's all kinds of other stuff in document, so, maybe now is a good time to open up.

[00:01:55]
You can just open up whatever the home screen is on your favorite web browser of choice, I use Firefox. So our consoles might look a little bit different if you use something else, but essentially if you inspect a page, you will see some HTML and whatnot. And if you go to console, hopefully you won't get extensions complaining at you, but you will have a fun little interface to play with HTML.

[00:02:26]
So for example, I can access this document HTML document. Sorry, you will get a fun interface to play with JavaScript, document is the fun interface to play with [LAUGH] HTML. Okay, so this is where you can be trying out as we go through and as I show some code examples on the slides.

[00:02:47]
Try them out, poke around, look for other things. Again, we're leaving a little bit the world of everything is prescribed and confined in the classroom and starting to move out to just poke around. So, I don't know what's on this document element, let's see. We can expand it in my little console here and we can see, whoa, there's all kinds of stuff on here.

[00:03:13]
So feel free to poke around as we go, if there's something interesting and you wanna look into it, go for it. We will have moments to all kind of come back together, okay. So documents got a lot going on, getting HTML elements is just one thing we can do, we can also mess with them cuz that's what we like to do as programmers.

[00:03:35]
It's mess with things out from under people so that they have really frustrating web experiences. No, [LAUGH] just kidding [LAUGH] we will talk a little bit later about how to avoid messing too much. But we do wanna mess with things sometimes. So for example, attributes are something that HTML elements have.

[00:03:54]
We can get them, we can set them from JavaScript. So essentially, we can write HTML from within JavaScript, and again, we're reviewing. One thing to note about attributes, has anybody run afoul of this before? Sometimes if you think that you have set an attribute that usually sort of is a true or false type thing by calling, let's, Let's say we have a button element that has the disabled attribute on it.

[00:04:26]
If I want to enable that button, I might be tempted to right button.SetAttribute disabled to false. Is that gonna work? No, because if I call Has an attribute disabled again, it's still gonna be true, so what is going on here? The difference between an element having an attribute disabled, and its value being falsy, or something that would be falsy in JavaScript.

[00:04:58]
HTML doesn't really have the same falsiness truthiness paradigm as JavaScript. So some attributes only have to exist in order to be interpreted by the browser as doing what they do, so be mindful of that as we go, yeah,
>> Is that because false is evaluated as a string?

[00:05:19]
>> Exactly, and so sometimes you'll also see set attribute, you'll see things like, I don't know, set attribute, Disabled to empty string. There's no button here, but you get the idea. This would essentially disable the element, even though it's setting it to empty string, because that means the attribute exists.

[00:05:57]
It has a value, HTML doesn't care what the value of the disabled attribute is, it just cares that the attribute exists. The browser cares that the [LAUGH] attribute exists. So, that's something you'll see sometimes, it's like why are they setting this to a value if we're trying for it not to exist?

[00:06:16]
Because the web has grown bit by bit over the decades, and not everything's super consistent all the time. So just be mindful that you might, if you have a weird bug related to that sort of thing where you're, why is that attribute still being picked up? Just make sure that you have deleted the attribute with the delete attribute method, instead of just setting it to what JavaScript would think of as a particular value, but the browser and the HTML parser doesn't care.

[00:06:53]
So fun facts [LAUGH]. All right, now, event handlers, are something we've probably also encountered in JavaScript. And this also gets at what we're gonna be talking about a lot in this course. The contextualization of JavaScript within the web browser, where a lot of other stuff that's not exactly JavaScript or not, at all JavaScript is going on.

[00:07:17]
And one of the things that's going on is events are being fired here and there. So there are events like clicks when the user clicks on something, or there are load events when a page or what have you has finished loading. Or there are all kinds of other different events that we can then.

[00:07:37]
Okay, so these events we can handle in JavaScript to do things based on user interaction, which is what we want to be doing most of the time as web developers. We wanna be building useful experiences for people, right? Which means that people need to be able to interact with websites, and that is why JavaScript exists in the first place, because it allows us to add some more flexible interactivity to pages.

[00:08:04]
So we're gonna be writing a lot of event handlers, and the general syntax of we pass in the name of the event we wanna handle. And then the handler function, we're gonna talk a lot more about that later, what we want to happen when that event occurs on the given element.