Today, we are going to introduce the concept of the Document Object Model or DOM. The DOM is a very important concept when you are working with JavaScript. JavaScript is a language that uses HTML and CSS to create its graphical user interfaces. Other languages use similar markdown languages such as XML to streamline the process of creating GUIs. (Note: we won’t really be looking at much code in this post.)

In this tutorial, we will assume that you have at least a basic understanding of HTML and CSS. HTML is a markdown language that basically lets you define where things will be on your GUI and CSS is a styling language that lets you configure how things will look on your GUI. JavaScript becomes very powerful with these two technologies because it can give the elements created by HTML and CSS specific behaviors.

The Document Object Model

The DOM is an application programming interface (API) of the hierarchy of objects inside of a typical HTML document. More specifically, the DOM refers to the structure of the document itself and how you can access and manipulate elements on the document. More or less, the DOM helps programmers by defining a standardized structure for an HTML or XML document.

5733353962_ecd5b221cf_zAll of this sounds really complicated but it truly isn’t. All the DOM really does is allow JavaScript (and other languages) to easily access HTML to read, write, delete and add elements dynamically. When you write an HTML document that you plan to access with JavaScript, you can think of your HTML as a tree structure of JavaScript objects. Each element on the HTML document has various properties that can be accessed and manipulated through the use of JavaScript functions.

The Window Object

For instance, the largest object in the Document Object Model is the window object. If you open your JavaScript console and type window you will see a return value of all of the child objects that exist on the current web page that you are on. The window object is an abstraction of an open window in your browser. Inside of the window object, there are three objects: the history object, the location object and the document object. The document object is the most important object for our purposes.

The history object is a representation of the browser history. If you open a new tab or window with your browser, then open your console and type history.length you will see a return value of 1. This is because you have only been to the first URL since the history object was created. The location object contains information about the current URL that you are viewing. Typing location.href will return the entire URL name of the URL you are currently on.
nodesBefore we talk about the document object in detail, we need to understand what nodes are and why the Document Object Model uses nodes to represent everything (including the document itself). If the DOM is a tree structure, then the nodes are represented by the intersections of the lines of the tree. There is a document node, text nodes, attribute nodes, element nodes and even comment nodes. All of these nodes represent different data structures on the HTML document. A good metaphor for the DOM is to think of the HTML document like a net with the intersection points being nodes. JavaScript can only grab these intersection points when it is manipulating the document.

The Document Object

The document object is the owner of the HTML document that you see in your browser. There are various JavaScript functions that use the document object to manipulate the nodes it owns. For instance, document.getElementById(), searches for an HTML element by it’s id and then returns it. This is a frequently used function which allows you to bind HTML nodes to variable names in a JavaScript program. You can also create different node types with different functions such as document.createElement(). You can create an element type then assign it to a node or near a node with document.appendChild().

We have actually been using various different DOM functions such as console.log() which calls the console object and then prints what’s inside the parenthesis to the console object. As we explore deeper and deeper into JavaScript we will start to see more and more of the Document Object Model and its various functions.

Conclusion

Today, we took a break from looking at pure JavaScript code to talk about the Document Object Model and how we can use it to access data on HTML documents. We looked at a very general overview of how the DOM works and how the nodes on an HTML document are organized.  As we continue forward with our look at JavaScript we will start to look at bigger examples which will start to use and rely on the DOM. In our next post, we will continue by taking a better look at objects and functions.