Transcript from the "The DOM API" Lesson
>> So I want you to emphasize that warning, okay? That this is not a common situations, that we are going to mix different techniques at the same time. I mean, we can, it will work, but you will see, for example, on doing reactive programming with the DOM. We will see two or three techniques.
[00:00:21] Yeah, probably you pick one and stick with that one for the whole project, but we will mix all of them, okay? So before seeing some code, but now we will see code, but before working with our project, let me go over some essentials, talking about the DOM API, okay?
[00:01:05] No, that's the DOM. So the DOM isn't a structure in memory. That browsers are creating when they are rendering a page, okay? That's the DOM. And the API, it's an API, so a list of functions, properties available under different objects that a browser is exposing to us so we can manipulate that structure.
[00:02:23] So the DOM API is available in many objects. And we're not going to cover 100% of the DOM API, because it's really large, and there are many things that I've never used. So there are many parts of the DOM API that are very specific for some specific situations that typically you don't use.
[00:03:46] So what's a window? This comes from the 90s where you have a window for one. So one page was loaded in one window, if you wanna open two pages, you need to create a new browser window. We didn't have tabs at the time, okay? So we don't have that, we didn't have tabs.
[00:04:06] So every page was actually on a window, and one window, one page. This is not the case anymore. So it's an unclear concept these days, okay?. But let's say that roughly it's like a navigation, like a main navigation, but it's not still there because we have iframes as well.
[00:04:27] When we have iframes like iframe is a like HTML document or the within another document, well, it gets more complicated, okay? But that's the window. Then we have the Document Object. That is more clear, a document is a DOM, so a structure. Typically since the 90s, we used to have only one document per window.
[00:04:52] So one HTML we are loading one HTML if you have a link to another HTML, that's another document. So the only exception here were iframes or even framesets originally, where in that case, we could load more HTMLs at the same time, okay? But these days, and we will see that later with web components, we can have more than one document in the same page navigation even without iframes.
[00:05:19] And the document object represents the current DOM, the Document Object Model, that memory structure. Okay, that's the structure in memory. And then we have the DOM API available on every object in the DOM. So we will have one object per HTML element. So every HTML element in your web app will have an object.
[00:05:45] And that object, will have the DOM API. Or one part of the DOM API is sitting there. So we can change things, we can add, children, we can remove elements from there. And I'm saying there, other notes, we won't get too deep in that part, but actually, when you have text nodes, we have comments in HTML.
[00:06:27] It was a thing years ago to do some hacks, okay? But not today. Anyway quick sample basic, this is very basic I know, but some of you, maybe the first time you're seeing this. Let's say we have that HTML, that's an HTML file index.html file, we'll load that in the browser.
[00:07:11] So there is an HTML element, okay? And also, we have other elements inheriting from that one. For example, we can have an HTML image element that is the class or the interface when you have an IMG tag, okay? These objects or these elements, we have properties, instance properties and methods to work with them.
[00:07:34] Changes in those properties will trigger updating the user interface. And this is important, when you're released the thread. So sometimes I hear from React developers that they like the virtual DOM, okay? That's a concept that doesn't exist a vanilla.js, a virtual DOM, so what's a virtual DOM? So virtual DOM in the case of React, every library is different.
[00:08:29] I mean, for example if you are making ten changes at once, React will receive that only in the virtual DOM and it will update the real DOM once. So it's more performant than vanilla.js. And my first reaction to that is that's false, because if you're making ten changes in the real DOM, okay?
[00:09:15] So if you're changing the same property, in the real DOM ten times in the same execution, the real DOM will just take the last one. So we will see on the page the last one. I'm simplifying this a little bit, I'm not saying that this is the same as the virtual DOM in terms of performance, but we have some things here in mind.
[00:09:38] Also, this might lead to some issues, and I have these issues in my web apps a lot. And there was a trick before that is a set timeout 0, I'm not sure if you have heard about that. Because you change something in the DOM, and then you wanna use it immediately in the same execution, and you can't.
[00:09:56] Because it's not yet, we didn't leave enough time for the browser to actually make that change. So the trick was to create the set timeout 0, and there is to defer an execution after the browser was making the changes, okay? Anyway, we don't need to do it anymore.
[00:10:17] But just to let you know that happened. And we can listen to events happening in that element and reacting consequences. Probably you have heard about these you have seen this, the famous today add event listener, okay? So for example for this particular code that you see there, we have the document.
[00:10:38] I'm simplifying this a little bit, but we have the document the document will have the body and there is an HTML body element, inheriting from HTML element. Then we have the header element inside, okay? It's a child of the body, the header. Inside the header we have the h1, the interface for the h1 is called HTML heading.
[00:12:54] It will release an update and it will remove the h1, so you won't see the h1 in the browser anymore. It's like going to the DevTools, inspecting the HTML and deleting the h1 manually, okay? If I take the img tag, you can see the img tag right now has a hidden property set.
[00:13:15] Well, I can go when I get the reference to that attribute for that img element, I can change the hidden attribute. So if I change the hidden attribute, I'm updating the contents of that HTML element it will trigger a change in the URL. And also it's not just playing with the current DOM.
[00:13:38] I can create a new HTML image element, but we'll see how later. And then I can attach that new element to the header, for example, and that will trigger a new img element in your HTML. So that's the idea of how we manipulate the content with vanilla.js. So if you're coming from React, it's not like we have a state.
[00:14:31] So you're executing some code, because of some reason. Most of the time, it's because you have an event listener. For example, you click on a button, you are listening for that click event and you have a function. Well, at one point that function ends. When that function ends, you're releasing the thread because there is no more code to execute.
[00:16:50] If you're using the DOM API to retrieve it won't be there because you'll remove it from the DOM structure, but the user is still seeing that on the screen, that's the problem. So when you wanna show, I mean, you wanna show a timer or something that is changing on the page, you need to release the thread because if not, the user will see the last state only.
[00:17:14] I think that probably will clarify that. So when you're working with the DOM API without releasing the thread, you're working with the memory structure. So if you remove something from the memory structure, and then you go through a structure and see if it's there, it's not. Because you remove that from the structure, but the user is still seeing that while you are doing that.
[00:17:33] Okay, so the difference is that when you're released the thread the browser will see. Now, if the what you see on the screen matches the current DOM. It's like the diff that React is doing between the vDOM and the virtual DOM and the real DOM. I'm simplifying, but it's kind of similar idea.
[00:18:09] And releasing the thread means that stop executing code, just let the event handler finish it, that's kind of idea.