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 JavaScript that works on any web page.

Introduction

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.

Purpose of the DOM

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.

Document Object Model illustration

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:

  1. Storing JavaScript in separate files allows for code to be reused more easily. When JavaScript is written inline, next to the content that it's associated with, it has to be copied for the same functionality to occur elsewhere.
  2. JavaScript separated into an external file makes the source code more readable by removing functionality of the web page (the JavaScript) from the content (the HTML).

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:

  • Element
  • Attribute
  • Text

Although the specification actually lists twelve in all.

Using a Script to Create Nodes in the DOM

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:

  • HTML Snippet
    HTML snippet with highlighted tags for use with the document object model demonstration
  • JavaScript Snippet
            //declare a new variable to hold a new h1 element

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

    //add the text node to the document

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

    //make it a child node of the new heading

    newHeading.appendChild(h1Text);

    //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 <body> 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.

A Little About the Lexical Structure of JavaScript

The above snippet bears a little explanation.

  •         var
        
    creates a variable, which stores an arbitrary value for your code to use.
  •         =
        
    is an assignment operator. Here it operates with the
            var
        
    term and the new variable's name (e.g., newHeading) to form a complete declaration.
  •         object.method
        
    is an invocation that uses "dot" syntax to separate objects, like the
            document
        
    , from the methods being used in regard to them, as in
            getElementById
        
    .
    • The concept of "objects" in programming merits a lot of discussion and is outside the scope of this article. Suffice to say they are important components of your application.
    • Methods are what you'd expect: a particular procedure or planned action that can be applied to the objects.

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

What's Next

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