5 Must Know JavaScript DOM Methods 🔀
Tags: javascript, webdev, beginners, programming
Published: 2022-08-24 14:22:29

I'm a proud advocate for **vanilla JavaScript** - I think it's the best way to build an exceptional understanding of the [most popular programming language](https://insights.stackoverflow.com/survey/2021) in the world 🌍

If you're into web development, part of being proficient in JavaScript is knowing some handy DOM methods - so here is 5 which you *probably* didn't know 🤫

## 1. [closest()](https://youtu.be/Eb5lyRn7lgk)
Starting us off is my favourite DOM method, `closest()`. This one is called on a child element, and will **traverse up the DOM tree** until it finds an ancestor that matches the given selector.

```js
/*
    Example HTML 👇
    ------------------------------------------------
    <ul>
        <li>
            <strong class="myStrong">Nested</strong>
        </li>
        <li>Another list item ...</li>
    </ul>
*/

const myStrong = document.getElementById("myStrong");
const containingList = myStrong.closest("ul");

// containingList == <ul>
```

One of the best use cases for this method is when you've attached onto an event listener but you're unsure of where you are in the DOM tree, and need to find a parent element ⬆️

## 2. [append()](https://youtu.be/XMjs2jQ9SXU)
It's time to stop using `appendChild()`.

The `append()` method allows you to append **multiple** things at once - and, it's not just elements. You can also append text at the same time.

```js
/*
    Example HTML 👇
    ------------------------------------------------
    <ul id="myList">
        <li>Apple</li>
        <li>Banana</li>
        <li>Carrot</li>
    </ul>
*/

const myList = document.getElementById("myList");
const pearListItem = document.createElement("li");
const lettuceListItem = document.createElement("li");

pearListItem.textContent = "Pear";
lettuceListItem.textContent = "Lettuce";

myList.append(pearListItem, lettuceListItem);
```

Also note - the `append` method is part of the [DOM manipulation convenience methods](https://caniuse.com/dom-manip-convenience) family ➕

## 3. [insertAdjacentHTML()](https://youtu.be/E6B-ig8NHQE)
Another one of my favourites is `insertAdjacentHTML()` - this one is similar to `innerHTML` in that it allows you to add HTML directly, but this one works on a **relative** basis.

You pass in the HTML you wish to add, and a position of where to add it which is relative to the element you call it on.

The available positions are:
* `afterbegin`: first element
* `beforebegin`: before the parent element
* `beforeend`: last element
* `afterend`: after the parent element

```js
/*
    Example HTML 👇
    ------------------------------------------------
    <button id="submitBtn">
        <span>Submit Form</span>
    </button>
*/

const submitBtn = document.getElementById("submitBtn");
const iconHtml = "<span class="icon">tick</span>";

submitBtn.insertAdjacentHTML("afterbegin", iconHtml);

/*
    Updated "submitBtn":
    <button id="submitBtn">
        <span class="icon">tick</span>
        <span>Submit Form</span>
    </button>
*/
```

As you can tell, this comes in handy when building user interfaces and when you need to build elements dynamically 💪

## 4. [matches()](https://youtu.be/s7He0jWYjVc)
If you're always using event listeners, you're going to love this one.

The `matches()` method will return `true` if the element you call it on matches the given query selector 😎

```js
/*
    Example HTML 👇
    ------------------------------------------------
    <button id="myButton">Click Me</button>
*/

const myButton = document.getElementById("myButton");

myButton.addEventListener("click", () => {
    if (myButton.matches(".has-errors")) {
        alert("You have errors!");
    }
});
```

Useful if you're inside an event listener.

## 5. [replaceWith()](https://youtu.be/DV40CIGvt8I)
If you find yourself in a situation where you need to update the DOM with new data from the back-end, this method *might* be perfect.

The `replaceWith()` method lets you replace an element with one or more others - just like the `append()` method covered earlier.

```js
/*
    Example HTML 👇
    ------------------------------------------------
    <ul id="myList">
        <li>Red</li>
        <li class="purple">Purple</li>
    </ul>
*/

const purpleLi = document.querySelector(".purple");
const greenLi = document.createElement("li");
const blueLi = document.createElement("li");

greenLi.textContent = "Green";
blueLi.textContent = "Blue";

purpleLi.replaceWith(greenLi, blueLi);

/*
    Result HTML 👇
    ------------------------------------------------
    <ul id="myList">
        <li>Red</li>
        <li>Green</li>
        <li>Blue</li>
    </ul>
*/
```

## [JavaScript DOM Crash Course](https://www.udemy.com/course/the-ultimate-javascript-dom-crash-course/?referralCode=DC343E5C8ED163F337E1)
You can find a complete course on the JavaScript DOM which goes over some of the topics covered in this post at the link below 👇
[https://www.udemy.com/course/the-ultimate-javascript-dom-crash-course/?referralCode=DC343E5C8ED163F337E1](https://www.udemy.com/course/the-ultimate-javascript-dom-crash-course/?referralCode=DC343E5C8ED163F337E1)

![Course Thumbnail](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hv8kpga747wpdz5pvu26.jpg)

Enjoy! 😎