The browser creates a representation of a document’s source code and this representation is known as the Document Object Model. When we change this representation, the browser reflects the change. The DOM is a tree-data-structure that we manipulate to change the style, structure and CSS of a document— in real-time. Mastering the DOM improves your productivity…
The DOM is a programming interface based upon a tree-data-structure. The primary job of the DOM is to represent a document within the browser. The DOM consists of tree branches that contain nodes and nodes contain objects that represent things within the document, such as paragraphs, tables and divs. Also, the DOM has methods. We use DOM methods to attach event handlers to the objects so that we can listen for and react to events. The methods help to provide interactivity to the document.
What you Will Learn
Let’s use JavaScript to perform CRUD operations against the DOM. We will Create, Read, Update and Delete:
- HTML elements and attributes in the page
- CSS styles in the page
Also, we will programmatically react to events by attaching event handlers to objects in the DOM.
Finally, DOM interaction will help to master Chrome’s developer tools.
What is the DOM?
The DOM is a standard for describing how a browser should behave with respect to documents. When browsers adopt this standard — the user experience when accessing a document should be identical, irrespective of the browser used.
The whatwg standard defines the DOM as:
“DOM defines a platform-neutral model for events, aborting activities, and node trees”.
The W3C defines the DOM as:
“The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.”
Think of the DOM as a representation of the document in memory. The DOM has access to this document-object and all the objects that the document-object contains. Programming languages can manipulate these objects to change the document’s content, style and structure. Programming languages change a representation of the source code, not the source code. This is a critical distinction!
The DOM is a representation of the source code. When the DOM changes, the representation changes, not the source code!
Figure 1 illustrates this concept. Source code is served up from a web-server. The browser then builds the DOM tree-data-structure from the source code. When we interact with that data-structure or the DOM, we are interacting with a representation of the source code. When the DOM changes, the browser reflects those changes but it does not transpose the changes to the server. It is one way traffic. Think of a virtual document in memory and all changes to the virtual document persist whilst the session is open.
The DOM is a live data-structure. When the DOM changes, the browser reflects the changes.
With the DOM, we are working with objects. The word model is just fancy nomenclature and can be ignored. To verify we are working with objects, type the following into the browser’s console. Figure 2. The document-object is a property on the window object. Figure 3. window.document returns a reference to the document contained in the window.
DOM Methods
DOM methods help us to modify the document’s objects. Because the DOM is represented as objects, we can use programming languages such as JavaScript to help us to read/change the document’s structure, style and CSS.
An example of a DOM method can be seen in Figure 4. document.querySelector() returns the first Element within the document that matches the specified selector. In this case, there is only one body element. We can also change the background colour of the object returned by document.querySelector()element by changing the object’s style.background property to ‘red’. This is just a simple example of using DOM methods to query and modify the DOM. We will use many DOM methods in these articles.
The DOM Tree and Nodes
All items in the DOM are nodes. All the node types can be found here but we mostly work with element and text nodes. Figure 5.
The DOM is a tree-data-structure and as such consists of parents, children, and siblings. From Figure 5, we observer that the parent is the <HTML> element node which has two child nodes, <head> and <body>.The <body> element node also has three children, which are siblings. Also, at the root of this family is the document node.
To determine the node-type you are working with, select the node within the ‘Elements tab’ from the developer tools. Hit Esc to show the console and type$0.nodeTypeto get a numeric node-type value. Figure 6. Here we see the node type = 1, which corresponds to an Element node like <p> or <div>.
Let’s create a minimal HTML page within Chrome. Open up Chrome and type about:blank within the address bar to get Chrome to create a minimal HTML page. Figure 7.
Type Ctrl + shift + i to open up Chrome’s developer tools. Alternatively, right click on the blank page and select inspect.
If we examine the basic structure of this HTML document from Figure 7, the code shows a <html>tag that encloses a <head> and <body> tag.
Whilst this page is not a real web page per se, let’s assume that the HTML within the ‘Elements tab’ is served by a web-server. This HTML represents the source code of the HTML document that is served by the web-server. It is a representation and not the actual source code. This is the DOM!
The actual source code is held on a remote web-server and we cannot change that source code without access to the web-server. However, we can manipulate this code using DOM methods - as this code is now part of the DOM.
Head over to part 2 of the document object model — explained — where we begin our exploration of DOM methods. Enjoy!
