The DOM!

This is going to be a relatively straight forward and perhaps a boring blog post (for some), and I have to admit, I am writing it, more to allow me to organise and structure the theoretical mess that my brain is currently experiencing.

I’ve been learning about Javascript at a higher level over the past few weeks, and it only occurred to me today that I don’t really know the DOM really well (For those who don’t know what the DOM is, keep reading, and you’ll find out (at least I hope you will)). For those who do know Javascript and the DOM, you’ll know that wanting to pursue web development, without understanding the DOM is a real ‘no-no.’

So back to it. In this blog post, you’ll have the pleasure of accompanying me on a journey to try and organise the current knowledge I have about the DOM. It’s going to be superficial and a fairly short explanation, as I only have half an hour to write this. So hopefully the few readers and fans I have out there can use this as a starting point to try and understand this concept.

So what is the DOM? The DOM (short for Document Object Model,) in layman terms is essentially a Javascript representation of a HTML page. If you think about the initial functionality purpose of Javascript, having the DOM makes complete sense.

Javascript was initially created to allow people to easily add interactivity to a webpage. So with HTML, you can structure and flood your page with stuff you want, you have CSS to make the web page elements pretty, then you have Javascript to allow certain ‘things ’ to happen when users interact with your HTML elements.

So in order for Javascript to play around with your HTML elements and make respective elements interactive (such as click a button and a pop-up to appear), it has to be able to access the HTML file in order to access these elements, right? Well assuming you have a HTML file and a javascript file, you connect the two, by typing something like this in your HTML.

<script src=“myJavascriptFile.js”></script>

YAY, now your two files can talk to one another!

Now if you know Javascript you know every bloody thing is an object (slight nuance, but just take this explanation for now pls.) So with that in mind, it should come as no surprise that the DOM and HTML elements that the Javascript file now has access to, will also be objects. That’s not a nuance, every element in the DOM is an object (and yes, this includes the document that your HTML file lives in and comments that exist in your HTML file).

Quick digression: Once these HTML elements are represented in Javascript, they are objects. But more formally, they are referred to as nodes. But they’re the same thing.

I think it might be easier to understand this with a code snippet.

So if you know Javascript syntax, from this you can tell that getElementById is a native method of the document object. What does this particular method let you do? It let’s you grab a particular node (HTML element) from the HTML page that your Javascript is connected to and play around with it. So now, if I wanted something to appear when my user clicked myButton, I can set that to happen in my Javascript!

Exciting stuff.

That’s not all you can do, you can also create elements from Javascript, you can style your elements from Javascript, OMG there’s a whole new world out there!

So play around, explore, it’s fun!

Hope that helped!

Like what you read? Give Krystal Lai a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.