Ben Fairbanks

Freelance Website Developer

An Explanation of the DOM in Java Script

Feb 17, 2017

What is the Dom you ask? Good question my foolish young coder. At it's essence the DOM is a way of understanding a website, an outlook that has been codified into JavaScript. DOM is short for Document Object Model, and it refers to just about everything on an HTML page. It is fashioned like a river system, beginning with the Document, flowing straight down to the HTML tag before splitting into head and body, which then break off into all the different bits of code which are included in the HTML page(i.e. the HTML code). Pull up a full page of HTML code and you can chart the course that the DOM takes, noting that each end tag denote the finality of that particular sections scope. These objects are called nodes.

Visual interpretation of the dom

These nodes(Objects in HTML) are usually run on servers rather than on the machine that is trying to view them. In this model the client machine (phone, laptop, TV at this point) sends off a request to view a page. This request is received by a domain, which then attempts to fulfill that request. This request is directed to a server, which is a bunch of computers wherein the script for the website is stored. If the server finds the requested script it runs it, creating a web page out of HTML elements and whatever else the script is comprised of. This finished product is then sent back to the client for their viewing pleasure. The chiral of this is the client side model. In the client side model the unfinished data is passed directly to the client, and the clients browser does the work of constructing it.

This is essentially a static model, in the way described. Websites made by either method would not have any changes made to them. They either exist or they do not. Making these websites fluid requires events. An event is anything that causes a change to that static environment. User input is one common sort of event, but there are others, such as portions of a website that perform actions or display movement. Event listeners are used to set up scenarios in which user input can trigger events. Some common examples of this would be a button that performs an action, or a section that magnifies when hovered over. To be clear this is not the extent of what event listeners can be programmed to do nor the entirety of events to which event listeners can be programmed to respond for, they are simply common examples.

There is one catch to this rather succinct summery, however. A thing called Window is the true root function of the Dom, behind even document. It is a representation of the window that the code is running in. The window is not commonly considered part of the DOM, but it's sure usefulness argues that it should be discussed in conjunction with this tutorial. One of the ways that Window is outrageously useful is a method is calling Window.event, which can be called to take a snapshot of what is going on at the exact time that an event trigger goes off. This provides the full state of the website, from user input, to what functions are active to even the users mouse position. As you have hopefully already learned, the greater the amount of information whilst programing, the more accurate the problem solving or the more creative the code that can be written.

Share this on Twitter!