An Introduction to the DOM Tutorial
Tags: javascript, webdev, beginners, tutorial
Published: 2022-07-17 15:35:00

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zt99swsehfk2upi7zgc6.png)
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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/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, 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](https://www.google.com/) and open up your Developer Tools. Then select the Console tab & type in the following:
```js
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 DOM Tree](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jyysivaxrdeux6q59m9l.png)
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.
```html
<!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 `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, we can access the type using the `nodeType` property. See the full list of node types [here](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType).

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` 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:
```js
$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:
```js
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.

## Summary
In the next article, we'll learn how to work with DOM elements using the following methods:
`getElementById()`, `getElementsByClassName()`, `getElementsByTagName()`, `querySelector()` and `querySelectorAll()`.

## Conclusion
If you liked this blog post, follow me on [Twitter](https://twitter.com/RembertDesigns) where I post daily about Tech related things!
![Buy Me A Coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ijinng8k7bf23v0o6gkj.png) If you enjoyed this article & would like to leave a tip — click [here](https://www.buymeacoffee.com/rembertdesigns)

### 🌎 Let's Connect

- [Portfolio](https://www.rembertdesigns.co/)

- [Twitter](https://twitter.com/RembertDesigns)

- [Github](https://github.com/rembertdesigns)

- [Codepen](https://codepen.io/rembertdesigns)

- [LinkedIn](https://www.linkedin.com/in/rrembert/)