New to JavaScript? Then What Exactly is This DOM?

Do you know about HTML, CSS, and JavaScript? Collectively those three languages are known as “The Essential 3” because we need all three of them in order to make a properly functioning website (putting aside back-end programming for now, e.g. storing a person's information in a database).

Don’t get me wrong, HTML all on its own can be used to create webpages with a structured layout, albeit without any styling, so it’d look pretty pants to be honest. And so we should always use CSS to style the HTML – we can set things such as font styles, colours, borders, margins, etc.

DOM stands for “Document Object Model” which represents the structure of any given webpage. By using JavaScript to programmatically manipulate the DOM, we’re taking additional control over the layout and styling of our webpages.

For example, we can programmatically modify the HTML structure, i.e. the layout of the elements on the page which are otherwise fixed as declared by the HTML code that we initially write as the basis of our document. We can make pages respond to user input – for example by calling a function when the user clicks on an image thumbnail – the large version of the image is then displayed.