The Document Object Model

The Document Object Model, a.k.a. the DOM, is the connection between HTML and Javascript.

The document as a tree

When the browser loads a web page, it turns the text of an HTML tree into an internal representation in order to render it.

This HTML

<p>Here is some <i>italic</i> text.</p>

Becomes something like this internally:

Note: In computer science, unlike in botany, trees typically grow from the top.

Tree terminology

Each ellipse in the tree is called a node.

The node at the top of the tree is called the root.

A node that contains other nodes is called a parent node and the nodes directly within it are its child nodes.

All nodes anywhere below another node are its descendants and all nodes anywhere above a node are its ancestors.

Nodes with no children are called leaves.

The DOM exposes that tree to Javascript

Each node in the tree is represented by an object.

And the objects are linked together so you can get from the object representing a P element to its children, which represent the text and the I element.

DOM objects have lots of functionality

• You can access DOM element objects that represent elements in the original HTML.

• You can change elements’ attributes.

• You can remove elements from the document.

• And you can add new elements.

The root of the tree

In the browser a global variable document is defined to represent the root of the DOM tree of the page.

It has an property body which represents the BODY element in the page as well as a number of methods for finding other elements.

Finding existing elements

• document.querySelector(selector)

• document.querySelectorAll(selector)

Both these methods take a selector like the ones used in CSS and return either the first element or all the elements that match that selector.

Query example

Both query methods also exist on the objects representing nodes in the tree.

// Find the first DIV in the document
const div = document.querySelector("div");

// From the DIV get a list of all the Ps under the div
const ps = div.querySelectorAll("p");

// Find the first SPAN in the first P that has
// a class="answer" attribute
const answer = ps[0].querySelector("span.answer");

Creating elements

• document.createElement(tag) - make a new element with the given tag.

• document.createTextNode(text) - make a new chunk of text.

createTextNode is rarely needed because, as we’ll see, you can just append strings to an element with the append method.

Attributes

• element.setAttribute(name, value) - set the value of the named attribute on element.

• element.getAttribute(name) - get the value of the named attribute on element.

• element.removeAttribute(name) - remove the named attribute from element.

Append

Element created with createElement aren’t added to the document automatically.

They can be added to an existing element with the append method.

append can also be used to add multiple elements and text in a single call.

Manipulating the DOM

To create:

<p>Here is some <i>italic</i> text.</p>a

We can write this:

// Make two new DOM elements
const p = document.createElement("p");
const i = document.createElement("i");

// Add some text to the I element.
i.append("italic");

// Add some text and the I element to the P element
p.append("Here is some ", i, " text.");

// Add the P element to the body
document.body.append(p);

Manipulating elements’ classes

While class is just another attribute that we can maniplulate via setAttribute there is an easier way to modify elements’ classes:

const p = document.createElement('p'); // <p>

p.classList.add('foo');            // <p class='foo'>
p.classList.add('bar');            // <p class='foo bar'>
p.classList.remove('foo');         // <p class='bar'>
p.classList.toggle('foo');         // <p class='bar foo'>
p.classList.toggle('foo');         // <p class='bar'>
p.classList.add('baz', 'quux');    // <p class='bar baz quux'>
p.classList.replace('bar', 'foo'); // <p class='foo baz quux'>
p.classList.remove('foo', 'quux'); // <p class='baz'>

Vocabulary