Skip to main content
HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials

JavaScript DOM

JavaScript DOM

Written by Published

The DOM is the browser's model of a page, and JavaScript uses it to read and change the page.

DOM stands for Document Object Model.

When a page loads, the browser turns your HTML into a tree of objects that JavaScript can reach.

Example

Example

javascript

document.body.innerHTML = '<h1 id="title">Hello</h1>';

const title = document.getElementById("title");

console.log(title.textContent);

The output is Hello, read straight out of the page.

What is the DOM?

The DOM is a tree of objects, one for each part of your HTML.

Every element, attribute and piece of text becomes a node in that tree.

document is the entry point to the whole tree.

Syntax

Syntax

javascript

document.getElementById("id");

Everything starts from the document object.

The DOM is Not Your HTML File

The HTML file is text on disk; the DOM is a live model in memory.

Changing the DOM changes what the visitor sees, but it never edits your file.

Example

Example

javascript

document.body.innerHTML = '<p id="demo">Original</p>';

document.getElementById("demo").textContent = "Changed";

console.log(document.getElementById("demo").textContent);

Reload the page and the original text comes back, because the file was untouched.

A Tree of Nodes

Elements sit inside other elements, which gives the tree its shape.

Example

Example

javascript

document.body.innerHTML = '<div id="box"><p>One</p><p>Two</p></div>';

const box = document.getElementById("box");

console.log(box.children.length);

The div has two child elements.

What You Can Do With It

Read and change text, attributes and styles.

Add and remove elements.

React to what the visitor does, which is the Events section.

Example

Example

javascript

document.body.innerHTML = '<p id="demo">Hi</p>';

const p = document.getElementById("demo");
p.textContent = "Changed by JavaScript";
p.style.color = "red";

console.log(p.textContent);

Three different kinds of change, all through the same object.

document.body and document.title

A few useful parts of the page have their own shortcuts.

Example

Example

javascript

document.title = "My Page";

console.log(document.title);
console.log(document.body.tagName);

tagName is always uppercase for HTML elements.

Scripts Run in Order

A script in the head runs before the body exists, so it cannot find elements yet.

Putting the script at the end of the body, or waiting for the page to load, avoids this.

Example

Example

javascript

document.body.innerHTML = '<p id="demo">Ready</p>';

const found = document.getElementById("demo");

console.log(found === null ? "not there yet" : "found it");

Looking for an element too early gives null.

Complete Example

Complete Example

html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript DOM</title>
</head>
<body>

  <h1>JavaScript DOM</h1>

  <p id="demo">Original text</p>

  <script>
    const p = document.getElementById("demo");

    p.textContent = "Changed by JavaScript";
    p.style.color = "teal";
  </script>

</body>
</html>

Try It Yourself

Run the above example in the Try It Editor.

Try changing the colour:

Set p.style.color to another colour and run it again.

Important Points

  • The DOM is the browser's live model of the page.
  • Every element becomes an object in a tree.
  • document is the way into that tree.
  • Changing the DOM does not change your HTML file.
  • A script cannot find an element that has not loaded yet.

Conclusion

The DOM is what turns a static page into something JavaScript can work with.

Every technique in this section is a way of reading or changing that tree.

It is the bridge between your JavaScript and what the visitor actually sees.

PreviousJavaScript Object ConstructorsNextJavaScript DOM Selectors