An Introduction to the DOM Tutorial
An Introduction to the Document Object Model
The Document Object Model, or the “DOM”, defines the logical structure of HTML documents & essentially acts as an interface to web pages. Through the use of programming languages such as JavaScript, we can access the DOM to manipulate websites and make them interactive.
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.
The browser also creates a representation of this document known as the Document Object Model. It’s through the use of the DOM, that JavaScript is able to access and alter the content and elements of the website.
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
The document object is a built-in object, containing many properties and methods.
We access and manipulate this object with JavaScript. And by manipulating the DOM, we can now make our web pages highly interactive! As we’re no longer limited to just building static sites with styled HTML content.
We can now build apps that update page data without needing to refresh, we can give users the ability to customize the page layout, and 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 object.
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 backgroundColor in JavaScript, instead of background-color which is used in CSS. Any hyphenated CSS property will be written in camel case in JavaScript.
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, and the head and 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, and 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:
Our <html>, <title>, <body> and <h1> are of the type ELEMENT_NODE with a the value of 1.
Our text This is a text node. located within the body which isn’t within an element is a TEXT_NODE with a value of 3.
And our comment <!-- This is a comment node --> is a COMMENT_NODE type with a value of 8.
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 displayed 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:
$0.nodeType;
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 8.
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.
Conclusion
In the next article, we'll learn how to work with DOM elements using the following methods:
getElementById(), getElementsByClassName(), getElementsByTagName(), querySelector() and querySelectorAll().
If you liked this post, make sure to follow me on Twitter where I post daily about Tech related things!
buymeacoffee.com/rembertdesigns