Hello, in this JavaScript video, I am going to cover the DOM. So which is the document object model? And that's essentially, you know, this right here, all of this. No good stuff, you know, all of this, which, you know, we don't have much up for let's actually add some fun. Add a, we'll add a div. And I'll say hello world.

I'm also gonna add an ID equals Hello, world. Okay. So in our js file, what we'll do is use the document. So this is really cool. You can manipulate the DOM document.we can get the elements of get element by ID, and guess what you put in here. We'll just put your B in a world Hello, well, let's actually console log out what?

Nothing's gonna be pretty interesting. I was like looking at this very interesting thing. So go to console says no. So let's have a look at the document or get element by ID. Hello. Ah, I realized the problem is because this code is running before the actual page is rendered.

So that element doesn't exist at that moment in time when the JavaScript code is run. So let's just add it right here. If there's any JavaScript that needs to be run, and an experiment after the code, let's add in the set of information it's pre at the bottom of the bodies just before the closing tag. Never do like before, out of file. Just put it in line like this, and I'll grab holder favor. Here, reload, and we get that so we get literally the entire element.

So let's go a step further, I'm actually going to maximize a little bit so as he would sleep, and go step further, if we want to get, let's say, just the actual text itself. So the methods we can do like in HTML, for example, this guest Hello, well, but let me show you if I were to put this to a bone reload, he gets the entire HTML. So you might not be one day you might want something particular, you can use up and get value method for that and I'm actually going to leave that as an extra task for you. You can also assign stuff so whenever you dot dot, dot inner HTML does get that getting the inner HTML. But if you were to do equals something, you'll add the ACCUPLACER. With this, you know, new HD out.

So there are some other method dummy. There's a lot of methods that you can use. You can use methods for essentially Welcome to, you can get like a bunch of classes, you can get everything that has a particular class and you can change the styling of it. You can change CSS as well. So let's actually change the CSS. So if I do document puts a new dot get element by ID.

Hello, and do.so you can even do da do does style dot color equals and let's actually just put in red for a reload it isn't changed to a color red we've modified The actual CSS as well. And obviously, right click inspect, as you can see, you know, it's got a different style attribute. So that is really, really cool. And that's it for the document object model the DOM, there are in observe a lot more functionality that you can utilize, and you will utilize a lot. But as long as you understand this is a format document, which is like everything on your page. And you know, you use some sort of retrieve after like, dot get element by ID, or dot get, you know, get elements by class, for example, and then you will use maybe a dupe to go over in any of the classes, I've actually haven't got that I'll provide a link for information as well.

And then you could either get data from it. And if you were to just print this out as an extra task, that was one way to just print this out, just console, log it, you'll get the actual color, whereas if you do equals, it assigns a new value to it, wherever it's the color property or wherever it's the actual elements HTML. It sells. So that's it. If you have any questions, feel free to pop me a message, and I look forward to seeing you in the next video.