In this article, we’re going to be working with the
document object, taking a look at the DOM tree and nodes. Let’s get started!
What is the DOM?
At its core, a website must consist of an HTML document, an
index.html. Using a browser we view the website, which renders from our HTML file/s and any CSS files which add style and layout rules.
To view the DOM, using your web browser, right-click anywhere on a page and choose “Inspect”. This will open up Developer Tools, like so:
The DOM is shown under the Elements tab. You can also view it by selecting the Console tab and typing “document”.
The Document Object
document object is a built-in object, containing many properties and methods.
We can now build apps that update page data without needing to refresh, we can give users the ability to customize the page layout, we can create drag and drop elements, in-browser games, clocks, timers, and complex animations. Working with the DOM opens up a whole lot of possibilities!
So let’s perform our first DOM manipulation...
Go to www.google.com and open up your Developer Tools. Then select the Console tab & type in the following:
document.body.style.backgroundColor = ‘orange’;
Press enter and you’ll see the background color has now changed to orange.
Of course, you haven’t edited Google’s source code (!), but you have changed how the content renders locally in your browser, by manipulating the
document is an object,
body is a property that we’ve chosen to edit by accessing the
style attribute & changing our
backgroundColor to orange.
Note that we use camel case
You can see your DOM adjustment under the body element of the Elements tab, or by typing
document.body into the console.
As we are working directly with the DOM in the browser, we’re not actually altering the source code. If you refresh the browser it will return to its original state.
The DOM Tree & Nodes
Largely due to the layout of the DOM, it’s often called the DOM Tree.
The tree consists of objects called nodes. There are many different types of nodes, but you’ll most often be working with element nodes (HTML elements), text nodes (any text content), and comment nodes (commented code). The
document object is its own node which sits at the root.
<!DOCTYPE html> <html> <head> <title>Nodes</title> </head> <body> <h1>This is an element node</h1> <!-- This is a comment node --> This is a text node. </body> </html>
When working with DOM nodes they’re also referred to as parents, children, and siblings, depending on their relation to other nodes.
In our above code example, the
html element node is the parent node, the
body elements are its siblings. And the
body contains three child nodes (which are siblings in relation to each other — much like a family tree). We’ll look further into this later on in the article!
How to Identify Node Type
So every node in a document has a type, we can access the type using the
nodeType property. See the full list of node types here.
Let's look at a few examples of the types that exist within our previous example:
<h1> are of the type
ELEMENT_NODE with a the value of
This is a text node. located within the body which isn’t within an element is a
TEXT_NODE with a value of
And our comment
<!-- This is a comment node --> is a
COMMENT_NODE type with a value of
How can we check our node types?
Go to the Elements tab in Developer Tools and click on any line. You’ll see the value of
== $0 display alongside. Now if you go to the Console tab and type
$0 the value of the node you selected will display. To check the node type, run:
The numerical value of the node type, corresponding to the selected node will be displayed. e.g. If you had selected
h1, you’d see
1. Doing the same for the text would yield
3, and the comment
And when you know where the node sits in the DOM, you don’t need to manually select it, you can access it directly, for example:
document.body.nodeType; // 1
You can also use
nodeValue to get the value of a text or comment node, and
nodeName to get the tag name of an element.
In the next article, we'll learn how to work with DOM elements using the following methods: