Javascript DOM (Document Object Model) Tutorial

In this Javascript tutorial we learn what the DOM is, how it works and how to interact with its objects and their methods and properties.

Here's a table of contents of what you'll learn in this lesson:
(click on a link to skip to its section)

Let's jump right in.

What is the DOM

Before starting this tutorial, we recommend that you have at least the basic knowledge of objects in Javascript, which we cover in more detail in the Standalone Objects tutorialOpens up in a new page

Every webpage, and the elements inside of it, can be considered to be an object. For example, the webpage itself is an object called document and has properties and methods associated with it that allows us to interact with it.

Example:
<script>

  document.write("Hello Koders!");

</script>

The document object makes the write() method available to us to write some text to the webpage.

Similarly, all other document elements like <title>, <body> and <h1> are objects as well and have properties and methods available to them. All of these make up the Document Object Model, or DOM.

Objects are organized in a hierarchy. For example:

  • The window object is the outermost element.
  • Any html document that’s loaded into a window becomes a document object, and is a child of the window object.

The individual html elements are then children of the document object. For example:

  • The html object is the outermost child of the document.
  • The head and body elements are children of the html object.
  • The title element is a child of the head object.
  • The h1 element is a child of the body object.

Below is a simple tree to illustrate this concept.

DOM Example Flowchart

DOM Methods & Properties

The DOM provides us with a variety of methods to interact with the document. The table below lists a few of the important methods and properties.

Method / PropertyDescription
getElementById()Return the element that matches the given id.
getElementsByName()Return all elements into an array that match the given name.
getElementsByTagName()Return all elements into an array that match the given tag.
getElementsByClassName()Return all elements into an array that match the given class.
querySelectorAll()Return all elements that match the given query selector.
innerHTMLAccess the contents inside the element.
Example:
<html>
<body>

  <p id="msg">
    Hello World!
  </p>


<script>

  var a = document.getElementById("msg");

</script>


</body>

</html>

The variable a now contains a reference to the paragraph with the “msg” id. Once we have the reference, we can access the content inside the paragraph with the innerHTML property.

Example:
<html>
<body>

  <p id="msg">
    Hello World!
  </p>


<script>

  var a = document.getElementById("msg");

  a.innerHTML = "Hello There!";

</script>


</body>

</html>

When we run the example above, we see that the text inside the paragraph changed.

We don’t have to store the reference into a separate variable first, we can access it directly.

Example:
<html>
<body>

  <p id="msg">
    Hello World!
  </p>


<script>

  document.getElementById("msg").innerHTML = "Hello There!";

</script>


</body>

</html>

In the example above, we get the element’s reference and then immediately access the innerHTML property.

It’s worth noting that if the element is below the Javascript code, it won’t work.

Example:
<html>

  <script>

    document.getElementById("msg").innerHTML = "Hello There!";

  </script>


<body>

  <p id="msg">
    Hello World!
  </p>


</body>

</html>

Once the translator gets to the code that changes the text in the paragraph, it doesn’t know yet that such a paragraph exists.

That means the getElementById() method will return null and we can’t access the innerHTML of nothing so the script fails and the translator raises an error.

Summary: Points to remember

  • The html document and the elements inside are objects and form the Document Object Model, or DOM.
  • DOM objects have properties and methods that allow us to interact with them, accessed through dot notation.