# JavaScript DOM Methods You Should Know

👋 Hey All,

Today, I'm gonna show you 15 DOM methods in JavaScript that I believe are essential for every JS developer to know.

These methods will help you in a variety of ways and are very helpful to have in your toolbelt when building applications with JavaScript.

<br>

# The Methods

## getElementById

The getElementById method allows you to select a DOM element by its Id as the name suggests:

```javascript
document.getElementById("fun");
```

This code will select the DOM element with an ID of `fun`. 

You would probably want to store this in a variable so you can use it multiple times without repeating yourself:

```javascript
const fun = document.getElementById("fun");
```

## querySelector

The querySelector method allows you to select a DOM element by a CSS selector:

```javascript
document.querySelector("#fun");
```

This code will also select the DOM element with an ID of `fun` however `querySelector` can be used with any CSS selector.

For example, by class:

```javascript
document.querySelector(".cool-class");
```

By element:

```javascript
document.querySelector("p");
```

Or any other CSS selector.

Another cool aspect of this method is that it can be called on a parent element to select a child that matches the query.

For example, if you have got a paragraph with a class of text inside of a div, you can select it with the following code:

```javascript
const div = document.querySelector("div");
const paragraph = div.querySelector("#text");
```

## querySelectorAll

The querySelectorAll method is very similar to the querySelector however it returns a `NodeList` with all elements it found rather than just a single node.

For example, to select all paragraph elements on a page:

```javascript
const paragraphs = document.querySelectorAll("p");
```

It is also important to know that a `NodeList` is different to an `Array` so you can't call array methods on it. However, you can convert a `NodeList` to an `Array` using the spread operator:

```javascript
const arr = [...paragraphs];
```

Now you can use methods like 'forEach` on the `arr` variable since its now an array.

## createElement

We know how we can select elements that already exist in the DOM. But how can we create them? For that, the `createElement` method can be used.

```javascript
const div = document.createElement("div");
```

This code simply creates a div. However, the element won't be found on the page because we haven't inserted it yet. For that, we can use the `appendChild` method.

## appendChild

The appendChild allows us to append a Node into the dom:

```javascript
document.body.appendChild(div)
```

This code will append the div we just created inside of the body element.

It is important to know that the `appendChild` element only appends nodes and not text.

## removeChild

The removeChild method allows us to remove a child from the DOM.

For example, lets insert a paragraph inside of the div we just created:

```javascript
const div = document.createElement("div");
const paragraph = document.createElement("p");
div.appendChild(paragraph);
document.body.appendChild(div);
```

We can then remove the paragraph element:

```javascript
div.removeChild(paragraph);
```

This method can also be used to remove an element that was already in the DOM, not one you just inserted. For instance:

```javascript
document.body.removeChild(document.querySelector("#someElement"));
```

This code will remove the element with an ID of `someElement` from the body.

## textContent

The textContent method lets us change the text in an element. For instance, lets change the text of a paragraph element with an ID of `text`:

```javascript
document.querySelector("#text").textContent = "I'm loving this article :)";
```

This will change the text of the element with an ID of `text`. This method can be called on any node so we can use it to add text to elements we create.

For example, lets create a paragraph and change its text, then append it to the body:

```javascript
const paragraph = document.createElement("p");
paragraph.textContent = "This is a cool paragraph!";
document.body.appendChild(paragraph);
```

## innerHTML

The innerHTML method lets us change the HTML inside of an element. For example, we can add a div inside of the body:

```javascript
document.body.innerHTML += "<div>My Div</div>"
```

The key difference between `innerHTML` and `textContent` is that `innerHTML` lets us change the HTML as well as whatever text we want inside, while `textContent` only lets us change the text.

## getAttribute

The getAttribute method lets us retrieve the value of any attribute on an element.

For example, we can select the href of an `a` tag:

```javascript
document.querySelector("a").getAttribute("href");
```

This method can be used to retrieve any attribute on any element.

## setAttribute

The setAttribute method lets us set the value of an attribute on an element.

For example, lets change the href of an `a` tag:

```javascript
document.querySelector("a").setAttribute("href", "/somewhere-else" );
```

The first argument is the attribute name and the second is the value.

## addEventListener

The addEventListener method is used to run a function when an event is triggered.

For example, lets log something to the console when a button is clicked:

```javascript
const btn = document.querySelector("button");
const logFunction = () => {
    console.log("Button was clicked");
}
btn.addEventListener("click", logFunction);
```

The first argument is the event name (there are plenty of them, do a quick google search to see them all) and the second is the function we want to run. It is best to store the function in a variable as we have done rather than use an anonymous function so that the event listener can be removed in the future if we wish.

## removeEventListener

The removeEventListener method lets us remove an event listener.

For example, to remove the click event listener we added to the button above:

```javascript
btn.removeEventListener("click", logFunction)
```

Now, when the button is clicked `logFunction` will no longer run. 

## classList (add(), remove(), contains())

Finally, lets discuss the classList property which contains 3 methods:

- The `add` method
- The `remove` method
- & The `contains` method

The classList property exists on all nodes and returns a DOMTokenList of all classes on the particular element.

```javascript
document.querySelector("h1").classList;
```

This code retrieved all classes on the `h1` element.

### add()

We can call the `add` method on the classList to add a class to an element:

```javascript
document.querySelector("h1").classList.add("myClass");
```

We can also pass in multiple classes to add multiple classes at once:

```javascript
document.querySelector("h1").classList.add("myClass", "anotherClass", "thirdClass");
```

### remove()

We can call the `remove` method on the classList to remove a class from an element:

```javascript
document.querySelector("h1").classList.remove("myClass");
```

We can also pass in multiple classes to remove multiple classes at once:

```javascript
document.querySelector("h1").classList.remove("myClass", "anotherClass");
```

### contains()

We can call the `contains` method on the classList to see if an element has a certain class:

```javascript
document.querySelector("h1").classList.contains("myClass"); // true or false
```

This methods return a boolean and can be used in conditional statements as well as.

<br>

# Take Away

This was a very long article with a lot of information. We've covered plenty of DOM methods that will really up your JavaScript developed skills. I recommend you play around these methods to get a better grasp of their use cases and why they are useful.

👌 Thanks for reading this article! 

If you like what I do and would love to see more related content, follow me on my other social platforms:

**GitHub:** [Blake-K-Yeboah](https://github.com/Blake-K-Yeboah)

**LinkedIn:** [Blake Yeboah](https://www.linkedin.com/in/blake-yeboah/)

**Twitter:** [Blake Yeboah](https://twitter.com/BlakeYeboah)

You can also show your support by buying me a coffee 😃
 
<a href="https://www.buymeacoffee.com/blakeyeboah"><img src="https://img.buymeacoffee.com/button-api/?text=Buy me a coffee&emoji=&slug=blakeyeboah&button_colour=855ff6&font_colour=ffffff&font_family=Cookie&outline_colour=ffffff&coffee_colour=FFDD00"></a>