JavaScript/Introduction to the Document Object Model (DOM)

HTML pages are internally implemented by a tree that contains the HTML elements (and CSS styles) as its nodes. This tree is called Document-Object Model, or DOM. JavaScript has full access to the DOM. It can navigate through the tree, modify the tree and nodes, ranging from simply adding new nodes to rearranging several areas on the page.

A hint about the terminology: Because of its closeness to XML, HTML uses the term element; and because of its structure as a tree, DOM uses the term node.

Nodes

When loading into the browser, the HTML document is broken down into a tree of nodes. For example, take a look at the following HTML snippet:

<div id="exampleDiv">This is an<br>example HTML snippet.</div>

Through DOM, JavaScript sees this snippet as four nodes.

The div, from its start tag through its end tag, is one node. This div happens to have a property assigned inside its start tag. This property is named "id" and has the value "exampleDiv".

The three other nodes in this example are inside the div. They are called child nodes of the div, because the div contains them. Conversely, the div is their parent node.

The first child of the div is a text node, with the value "This is an". Text nodes contain only text; they never contain tags, which is why the tree stops here.
The br tag is another node.
The rest of the text is another text node.

Since the text nodes and the br tag all share the same parent, they are said to be sibling nodes.

Accessing nodes

You can access nodes of the DOM tree by various methods. One of them is getElementById.

<!DOCTYPE html>
<html>
  <head>
    <script>
      function go() {
        "use strict";
        const p = document.getElementById("p2");
        alert(p.innerHTML);
      }
    </script>
  </head>

  <body id="body">
    <p id="p1" style="background: aqua">one</p>
    <p id="p2" style="background: green">two</p>
    <p id="p3" style="background: red">three</p>
    <button onclick="go()">Show the second paragraph</button>
  </body>
</html>

When clicking on the button, the function go is called. It accesses the element with the id 'p2' and shows its content.

Accessing content

If you want to get access to the content of a node, you can use different properties of different classes: Node.textContent, HTMLElement.innerText, or Element.innerHTML. But they are not equal; please consider the differences. To keep our examples clear and easy, we use Element.innerHTML whenever possible because it is very close to the HTML source code.

const exampleContent = document.getElementById("example").innerHTML;

Changing content

After accessing a node, you can change its content by assigning a new value to its content.

<!DOCTYPE html>
<html>
  <head>
    <script>
      function go() {
        "use strict";
        const p = document.getElementById("p2");
        p.innerHTML = "Another text";
      }
    </script>
  </head>

  <body id="body">
    <p id="p1" style="background: aqua">one</p>
    <p id="p2" style="background: green">two</p>
    <p id="p3" style="background: red">three</p>
    <button onclick="go()">Change the second paragraph</button>
  </body>
</html>

When clicking on the button, the function go is called. Again, it accesses the element with the id 'p2' and changes its content.

Modifying the tree structure

JavaScript can manipulate the structure of the DOM tree.

<!DOCTYPE html>
<html>
  <head>
    <script>
      function go() {
        "use strict";

        // read 'body' node
        const b = document.getElementById("body");
        // read second 'p' node
        const p = document.getElementById("p2");
        // moves it to the end of 'body'
        b.appendChild(p);
      }
    </script>
  </head>

  <body id="body">
    <p id="p1" style="background: aqua">one</p>
    <p id="p2" style="background: green">two</p>
    <p id="p3" style="background: red">three</p>
    <button onclick="go()">Move the second paragraph</button>
  </body>
</html>

When clicking on the button, the function go is called. It accesses the elements 'body' and 'p2', then, it moves the 'p' element to the end of the 'body'.