What is DOM in JavaScript?

The DOM stands for “Document Object Model”. The DOM is a representation of a web page that JS can use.

What is the DOM?

A Document is a global object representing the HTML and content of  a web page.

Imagine if we had a model of a house on paper, we have all the dimensions, the height, width etc…  but the house also exists in real life. You know how the building goes, right? You plan it first and then you build what’s exactly in the plan. Speaking in development concept, the DOM is what the website uses as a model.

However, the DOM is dynamic and we can manipulate it in real life. Unlike the building. Imagine if we wanted to change a room width, paint it a different colour, add a garage and any other thing, can you imagine these things change in real life? Imagine if you wanted to add a new room for your house, so you draw it with a pencil, and it appears. That’ll be fun! That’s how the DOM works in the browser!

When we change the DOM, we are alternating the webpage.

Everything in JavaScript and I mean every single thing in JavaScript, is an Object. Everything.

We can use the DOM to cool things in the browser. Grab something, manipulate it, and add an event.

We can do basic things with JS in the DOM. Select the Element, Read or Change the Element and Respons to the user Events – Action.

Think about it this way:

Select the Element

Would be cool to have an elevator! We won’t need to walk 100steps up. Okay. I see an elevator there, on the truck. Let’s grab the elevator, and now it’s ours, we can do something with it.

Read or Change the Element

Now that we have an elevator, we want it to fit in the building. It needs to be 1meter in width, and 2.5meters in height. I don’t like the color of it, let’s change it to a nice red.

Now, let’s put it inside the building.

Click! Click! Nothing happens.

Respond to user Events – Action

Usually, an event is a user based action, like a click. We want the elevator to come pick us when we press the button. Alright! Let’s connect the button with the elevator, we press the button, and the elevator will come. Pressing(that’s an event). On Click, the elevator will come.

This is the very basic way of thinking about the DOM. I will cover more in the future posts with some examples.

Meet the author

Meet the author

Aurelian Spodarec

Front-end WordPress developer that blogs about web development. I like using the right tools for the job. In my spare time, I enjoy cooking healthy food and then eating it. Delicious!