JavaScript and Web Development: Using the Document Object Model

This article will introduce you to the document skeleton that JavaScript works with. Having a working knowledge of this abstract document object model, you can write JavaScriptthat works on any web page.

How do web pages and JavaScript work together and how are they able to talk to each other? The answers lie in understanding how Document Object Model works.

The DOM organizes the content of a web page and provides a road map into it. The model is made up of nodes. Nodes are arranged into a hierarchy that's best thought of as a tree structure. We should be able to take any HTML and represent it that way.

For example, the text of this paragraph is a node within the Document Object Model. The paragraph is another node and the parent to the text node. The document itself is ultimately a parent node to both of them.

We can write JavaScript to act on the web page by identifying nodes. Since every piece of content is a node, we can then write JavaScript that is relevant to whatever entity we want to change. You'll notice this is similar to how CSS works: it applies style, or visual appearance, to content by using id and class attributes of HTML elements, just as JavaScript controls behavior.

It's important to note that CSS and JavaScript, aren't found in the DOM, but outside of it. They both manipulate the content of the DOM, rather than inhabiting it.

Reusing Code

Why is the source code for web pages managed this way? There are two main reasons:

The Nodes of the DOM

The nodes you create and control are limited to what the HTML specification and browsers support. That's one reason that HTML5's introduction of new top-level elements was important.

For our purposes, the most important types of nodes are:

Although the specification actually lists twelve in all.

For the purpose of a simple demonstration, we're going to use JavaScript to create one particular element.

Here we'll show you how powerful JS is by using it to create one of the web's most fundamental and common web page objects, the heading.

To follow along with this example, creating an entire virtual server is not worth the trouble, so use an online sandbox. You'll want a light-weight playground to experiment with like JSBin. JSBin is great because it's multi-paned, and includes a way to see and manipulate everything: HTML, JS, CSS, and the web page preview all at once.

(Codepen is similar, and for the sake of this example, will work just as well.)

JSBin can also dynamically create URLs for your JS scratchpad that can be shared later. Here's the one I generated for this example.

I've reproduced and commented the following snippets to produce a new H1 heading in the body:

http://declare a new variable to hold a new h1 element

var newHeading = document.createElement("h1");

http://add the text node to the document

var h1Text = document.createTextNode("Heading Level 1");

http://make it a child node of the new heading

newHeading.appendChild(h1Text);

http://append this as a child of element defined as "bt"
document.getElementById("bt").appendChild(newHeading);

Which creates a new H1 element and its content directly subordinate to the opening tag.

Note that the source HTML in the left-hand pane doesn't change. That code is fairly easy to read in this example. In advanced Javascript, things can get a lot more complex.

The above snippet bears a little explanation.

var

=

var

object.method

document

getElementById

We've certainly got you covered with lots of great resources for learning JavaScript. Check back into our programming section for even more.

One of the most popular frameworks that makes use of JavaScript is JQuery. It's an important foundation to the newest iteration of rich web pages and applications, and it's where you may want to start next.

Did this article help you learn more about beginning JavaScript? Have a different approach? We want to hear from you in the comments below!

Image Credit: Imagentle via Shutterstock.com