vides a path for writing ES6 today. It can make deployment and debugging more
painful, but such is the price of progress.
In this chapter, we will assume the use of a transcompiler, as covered in
The examples in this chapter all run correctly in the latest version of Firefox without
transcompilation. If you are publishing your code for a wider audience, you will need
to transcompile to ensure your code works reliably across many browsers.
The Document Object Model
The Document Object Model, or DOM, is a convention for describing the structure of
an HTML document, and it’s at the heart of interacting with the browser.
Conceptually, the DOM is a tree. A tree consists of nodes: every node has a parent
(except for the root node), and zero or more child nodes. The root node is the docu‐
ment, and it consists of a single child, which is the
<html>
element. The
<html>
ele‐
ment, in turn, has two children: the
<head>
element and the
<body>
element
(
is an example DOM).
Every node in the DOM tree (including the document itself) is an instance of the
Node
class (not to be confused with Node.js, the subject of the next chapter).
Node
objects have a
parentNode
and
childNodes
properties, as well as identifying proper‐
ties such as
nodeName
and
nodeType
.
The DOM consists entirely of nodes, only some of which are HTML
elements. For example, a paragraph tag (<p>) is an HTML element,
but the text it contains is a text node. Very often, the terms node
and element are used interchangeably, which is rarely confusing,
but not technically correct. In this chapter, we’ll mostly be dealing
with nodes that are HTML elements, and when we say “element”
we mean “element node.”
258 | Chapter 18: JavaScript in the Browser
