JavaScript and the DOM

DOM (for Document Object Model) is a way of conceptualizing and structuring the content of a web page. You can think of this as an agreed-upon method to describe document elements and their relationship to each other, just as there is an agreed-upon way of describing houses on a street. We all acknowledge, for instance, that the long strip of tarmac dividing houses on one side from the other is called the “road”. Each house is numbered, but we might also address them by position: “The third house on the left”, for example, or “The house after the red house”. While each house or building will be entered in a slightly different way, we address that entryway using the same name: “door”.

“HTML tells a story to the browser. CSS clothes and animates the characters. JavaScript whispers from the wings, changing the plot.”

Background

DOM Level 0, created in 1997, was a basic page description language, but it grew rapidly in complexity. Both Netscape and Microsoft created incompatible DOMs, largely in order to compete with each other, forcing developers to code JavaScript differently for each browser.

In 1998, the W3C released DOM Level 1, a standardized API for referring to the content of web pages, and modern browsers now support it to a high degree. The DOM has now become so ubiquitous that JavaScript is sometimes given another term: DOM Scripting.

The DOM is highly reliant on validated, structured, semantic HTML code. Just as you might struggle to make sense of a city that has grown without any plan, reason, or building codes, JavaScript will have a hard time working with a page that is invalid. For that reason, you should have a good understanding of HTML before attempting to add JavaScript to a page. Just like CSS, JavaScript loves clean code.

Through A Mirror, Darkly

The DOM is a reflection of the foundational HTML on a page: the DOM cleans up the HTML and allows you to make changes to it in real time. For example, create an HTML page with the following code:

<!doctype html>
<html lang=en>
	<title>DOM Example Page</title>
	<main>
		<p>Text content
	</main>

This is perfectly valid HTML5 code. Bring the page into a browser, right-click on the text, and choose Inspect Element. The result, shown using the browser's Developer Tools, will look something like this:

<html lang="en">
	<head>
		<title>DOM Example Page</title>
	</head>
	<body>
		<main>
			<p>Text content
		</main>
	</body>
</html>

The DOM is what the browser “thinks” of the page: as a first step, the DOM API cleans up the code it is given to the best of its ability, ensuring that all tags are closed and all attribute values are quoted. This doesn't mean that the code we initially created is “wrong” in any sense, only that the DOM’s understanding of the page is more precise: you might think of it as the difference between an architect's sketch of a house and a fully detailed engineering plan of the same structure.

Manipulating The DOM

While looking at your page in the browser window, switch to the Console tab in Developer Tools and type the following:

document.querySelector("main p").innerHTML = "new content";

Take a look at the page, and then switch back to the Inspect Element tab. You’ll see that the page and DOM have changed, reflecting your new content. However, the actual source code has not: you can prove this by right-clicking on the page and choosing View Source, where you will see your original code, unchanged.

The DOM is the browser’s understanding of the page from moment to moment, and this comprehension be adjusted or changed on the fly. It is derived from the initial HTML we feed the browser, but may be expanded and modified in many ways, primarily through JavaScript.

Illustration by Rachel Nabors, used with permission

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.