DOM Programming: Manipulate Web Pages With Code

The Document Object Model or DOM describes how every element in an HTML page relates to the document itself.

In essence, every HTML, XHTML, or XML page once uploaded to the web, becomes a document. The DOM sees those documents as a tree structure. The document itself is the topmost structure and each element on the page is represented as an object.

This means that every image, every paragraph, every heading, and so on is a separate object that has its own relationship with the document.

By calling a particular element by its name, web developers can modify that element. This means web developers can retrieve and set their properties.

The DOM also makes it possible to add and remove elements or objects. Finally, it allows web developers to capture and respond to user or browser actions, effectively dealing with events.

Brief History of DOM

The history of DOM dates back to the days of the browser wars and the release of the first scripting languages.

Once both Netscape’s Navigator and Microsoft’s Internet Explorer released their own versions of JavaScript, developers found themselves in need of an interface which would allow elements on the page to be accessed with those scripting languages.

Naturally, each browser had their own method but this resulted in many compatibility problems as browser vendors tried to outdo each other by adding new features.

Eventually, the W3C started working on a specification for the XML DOM, also called the Level 1 DOM which was supposed to be portable across all browsers.

It was also meant to work for any programming language that could manipulate XML documents. This specification was adopted as the standard in late 1998. The current version is DOM 4, a W3C Recommendation from 2015.

Two Views of the DOM

The DOM consists of two parts; the core and the HTML. The core is the basis for the HTML part and is used to represent the functionality needed for XML documents to manipulate the document structure, its elements, and attributes.

The HTML part defines the specific HTML elements and their functionality. As such, the DOM is seen as both an API and an object.

DOM as an API

As an application programming interface (API), it is used for both HTML and XML documents. It gives us a standard set of objects used in those documents and also serves as a model of how those objects can be combined, accessed, and manipulated.

DOM as an Object

The object model in the DOM refers to the fact that documents and elements are defined as objects. In that sense it identifies:

• The interfaces and objects used to represent and manipulate a document
• Their behavior and attributes
• Their relationships.

DOM Structure

Structurally, DOM closely resembles the document it models. Each and every element of the document is perceived as an object or a node, organized in a hierarchical fashion.

Each node has a function and an identity and each node can also have any number of child nodes. The most common nodes are elements, text, and attributes.

Element Nodes

Element nodes are individual tags or tag pairs in the HTML code. They can have child nodes, which may be other elements or text nodes.

Text Nodes

Text nodes are the actual content in between the HTML tags. They usually have a parent node and sometimes sibling nodes but they cannot have their own child nodes.

Attribute Nodes

Attribute nodes are somewhat special. They don’t have a parent node, children, or sibling nodes but instead they represent the attributes defined in HTML tags, such as the href attribute in the a tags or the src attributes in the img tags.

A new attribute can be created using document.createAttribute() and then you can assign it to an element node and set its value. Another way of referencing attributes is by access an element’s attributes directly using getAttribute() and using setAttribute() method to set its value.

When talking about attributes, it’s worth mentioning that most attributes used with HTML tags are relatively simple, consisting of a single value for a specific property associated with that tag. However, there are also style attributes which can be more complex.

Style attributes are applied with the help of CSS. You can use it to apply styles to individual tags, all tags of a particular type, or you can assign style attributes using classes.

To complicate matters even further, styles for a particular element can be inherited from any of these sources. You can also manipulate and change those styles either by changing the style attribute of a tag or by using the tag’s class attributes.

However, doing so will alter all of the element’s style parameters and in some cases, that’s not practical, especially if you want to change just a single style parameter.

Luckily, the style attributes differ from other attributes. They are defined as objects and have properties for every possible parameter. These properties can then be accessed, updated, and otherwise manipulated.

Using The DOM

Since each document is also an object, it serves as a starting point for manipulating other nodes in it. Those child nodes can be accessed and manipulated using the following methods:

• getElementById()
• getElementsByTagName()
• createElement()
• createAttribute()
• createTextNode().

You can also dynamically add, update, and remove nodes using the following methods:

• insertBefore()
• replaceChild()
• removeChild()
• appendChild()
• cloneNode().

DOM is tied directly to HTML, CSS, and JavaScript since it reflects the tags and attributes defined by those standards as well as serves as the API for client-side scripting.

Resources

The following list of resources give a detailed overview of the DOM and are suitable for both beginners and advanced users. A reference list is also included as well as resources with examples.

• JavaScript and the DOM Series: this is a very detailed series of tutorials going in great detail about using JavaScript to manipulate the DOM.
• JavaScript DOM Tutorials: a set of interactive tutorials that teach you how to access and manipulate the DOM from JavaScript. A prior knowledge of JavaScript is assumed, however, it’s worth mentioning that no specific libraries are used.
• DOM Nodes: a very thorough overview of the DOM nodes suitable for beginners looking to get familiar with how DOM is structured and which nodes it includes.
• JavaScript DOM — Exercises, Practice, Solution: a set of various exercises involving DOM ranging from simple exercises to more complex ones.
• The W3C Document Object Model (DOM): this guide published by W3C offers an introductory and beginner-friendly overview of the DOM, the history, and how it works.
• Introduction to the DOM: a brief conceptual introduction to the DOM published by the Mozilla Developer Network which explains how it provides structure for HTML and XML documents and how you can access it.
• W3C DOM4: the latest DOM recommendation by W3C dating from 2015, which contains the overview and detailed specifications for the DOM.
• DOM Reference: a handy reference list published by Microsoft’s Developer Network including properties, methods, events, and more.

Books

If you prefer learning from books, there are many options. The books on the list go into great detail about DOM, how it works, and how documents can be manipulated.

• DOM Scripting: Web Design with JavaScript and the Document Object Model (2005), by Jeremy Keith: this book provides a quick and easy reference for those who are not code experts, but want to quickly learn and take advantage of JavaScript and DOM to add functionality to their web sites. It includes plenty of examples and guides readers through building several real world projects.
• Document Object Model (2002), by Joe Marini: the author of this book helps you learn the concepts, design, theory, and origins of the DOM. Throughout the book, you will use the DOM to inspect, navigate, and manipulate a document’s nodes and content; then learn to build useful applications that can easily be ported to any DOM-compliant implementation without re-coding.
• DOM Enlightenment: Exploring JavaScript and the Modern DOM (2013), by Cody Lindley: with the help of this book, you’ll learn how to manipulate HTML more efficiently by scripting the Document Object Model (DOM) without using a DOM library. With plenty of easy to digest examples, the author gives you a complete walkthrough of modern DOM concepts to demonstrate how various node objects work.

Go Forth and Traverse the DOM

Understanding the DOM is one of the essential concepts for any aspiring web developer.

The best part about it is that you do not need any special tools to start using it. All you need is a script and your preferred browser. As soon as you create a script and include it in your web page, you can begin using the API for the document or window elements to manipulate the document in various ways.

The resources above will serve you as a solid starting point in traversing the DOM.

Further Reading and Resources

We have more guides, tutorials, and infographics related to coding and website development:

• Composing Good HTML: this is a solid introduction to writing well-formed HTML and using HTML validator software.
• CSS3 — Intro, Guides, and Resources: this is a great place to start learning webpage layout.
• ASP.NET Resources: this guide will get you going with Microsoft’s .NET framework for creating webpages.

HTML for Beginners — Ultimate Guide

If you really want to learn HTML, we’ve created a book-length article, HTML for Beginners — Ultimate Guide.

And it really is the ultimate guide; it will take you from the very beginning to mastery.

HTML for Beginners — Ultimate Guide