JavaScript and Web Development: Using the Document Object Model

Rodrigo Mehren 13-02-2017

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 What is JavaScript, And Can the Internet Exist Without It? JavaScript is one of those things many take for granted. Everybody uses it. Read More that 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.

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
Image Credit: Birger Eriksson via Wikimedia Commons

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 Creating Web Interfaces: Where to Start We'll show you how web interfaces break down, then point out the key concepts, tools, and building blocks needed to make yourself a 21st century web designer. Read More : 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 What Is HTML5, And How Does It Change The Way I Browse? [MakeUseOf Explains] Over the past few years, you may have heard the term HTML5 every once in a while. Whether you know anything about web development or not, the concept can be somewhat nebulous and confusing. Obviously,... Read More .

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 How to Create a Virtual Web Development Environment and Server So how do you balance your ability to multi-task with your need to develop web apps in the native context where they'll run? Enter virtual machines. Read More , 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 SnippetHTML 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
    //append this as a child of element defined as "bt"

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.

We’ve certainly got you covered with lots of great resources for learning JavaScript Really Learn JavaScript with 5 Top Udemy Courses JavaScript is the programming language of the web. If you have a reason to learn JavaScript, these five excellent courses from Udemy could be the place to begin your coding journey. Read More . 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 Making The Web Interactive: An Introduction To jQuery jQuery is a client-side scripting library that nearly every modern website uses - it makes websites interactive. It's not the only Javascript library, but it is the most developed, most supported, and most widely used.... Read More . 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

Related topics: JavaScript, Programming.

Affiliate Disclosure: By buying the products we recommend, you help keep the site alive. Read more.

Whatsapp Pinterest

Leave a Reply

Your email address will not be published. Required fields are marked *

  1. lazehiku
    February 13, 2017 at 2:52 pm