demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

JavaScript and the DOM

javascript / introduction

Estimated reading time: 3 minutes

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.

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”.

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, will have a hard time working with a page that is invalid. For that reason, you should have a good understanding of before attempting to add JavaScript to a page. Just like , 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.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.