HTML DOM Manipulation with JavaScript
Tags: beginners, tutorial, javascript, webdev
Published: 2019-11-06 14:46:59

---
title: "HTML DOM Manipulation with JavaScript"
description: "HTML DOM Manipulation with JavaScript"
tags: ["Beginners", "Tutorial", "JavaScript", "Webdev"]
published: true
---

## Intro

The DOM ([Document Object Model](https://en.wikipedia.org/wiki/Document_Object_Model)) is an interface, where you can access and manipulate content, structure and style of a website.

We will have a look at the following topics:

- What is the DOM?
- How can we manipulate it?

## What is the DOM?

When we open a HTML file in our browser, the DOM gets created by the browser, so the DOM is the representation of a HTML document.

HTML elements, e.g. `<body></body>`, `<p></p>`, become so-called nodes. Nodes have relationships to each other and are structured as a tree.

The root of the DOM is called `document`.
By using JavaScript, the DOM can be accessed and manipulated.

## Accessing a Node / HTML element

There are various way to access a single node.

### `querySelector`

`querySelector` is a method to input a complete query and get the first occurrence back.

```js
// access the body tag
document.querySelector("body");

// access the "button"-class
document.querySelector(".button");

// access the "footer"-id
document.querySelector("#footer");
```

As we can see, we can access an element by tag(`body`), by class(`.button`) or by id(`#footer`).

### `querySelectorAll`

`querySelectorAll` is a method to input a complete query and get all occurrences back.

```js
// access the "button"-class
document.querySelectorAll(".button");
```

### `getElementById`

`getElementById` is a method to get a single element with a specific id.

```js
document.getElementById("header");
```

We get the element that has the id `header`.
We don't need `#` like when using `querySelector`.

### `getElementsByClassName`

`getElementsByClassName` is a method to get all elements with a specific class.

```js
document.getElementsByClassName("button");
```

We get the elements that has the class `button`.
We don't need `.` like when using `querySelector`.

Like we can see in the method name, `Elements` is plural, therefore we get a collection of HTML elements back, not a single element, even if it is empty.

### `getElementsByTagName`

`getElementsByTagName` is a method to get all elements with a specific HTML tag.

```js
document.getElementsByTagName("p");
```

We get the elements that has the HTML tag `p`.

Like we can see in the method name, `Elements` is plural, therefore we get a collection of HTML elements back, not a single element, even if it is empty.

### What do I use?

I use `querySelector` and `querySelectorAll`, because both can be used with tag, class and id.
I don't want to change multiple lines when I change an `id` into a `class`.

There is a lot of legacy and transpiled code, therefore you should know how to use all the other methods, too.

### More complex queries

Sometimes you have to find more complex stuff

```js
// a tag with a class
document.querySelector("body.main"); 
// <body class="main">

// a class as a child in a tag
document.querySelector("body > .text"); 
// <body><p class="text">...</p></body>

// a class anywhere in a tag
document.querySelector("body .text"); 
// <body><section><p class="text">...</p></section></body>

// a parent
document.querySelector("body").parentNode;

// all children
document.querySelector("body").childNodes;

// first child
document.querySelector("body").firstChild;

// last child
document.querySelector("body").lastChild;

// previous sibling
document.querySelector("body").previousSibling;

// next sibling
document.querySelector("body").nextSibling;
```

## Manipulating elements in the DOM

```js
// change text content of a node
document.querySelector(".text").textContent = "Hello";

// change HTML content
document.querySelector(".text").innerHTML = "<p>Hello</p>";

// change source of an image
document.querySelector(".logo").src = "lion.jpeg";
```

## Creating new elements in the DOM

```js
// create a new element and store it into a variable
const newParagraph = document.createElement("p");

// add text to the newly created paragraph
newParagraph.textContent = "Hello";

// find container where the new paragraph should live in
const container = document.querySelector("body");

// add new paragraph to container
container.appendChild(newParagraph);
```

## Adding an Event Listener to the DOM

```html
<!-- a simple button -->
<button class="my-cool-button">
  Click Me
</button>
```

```js
// find the button in the DOM by using the class
const myButton = document.querySelector(".my-cool-button");

// add a listener to the button, that waits for a "click" event,
// then run the following function
myButton.addEventListener("click", function() {
  alert("Hi");
});
```

## Outro

These are just a few of the ways to work with the DOM to give you a small primer.

If you want to dive deeper into the topic, read this [free book](http://bit.ly/dev-dom).