Another 5 Must Know JavaScript DOM Methods 🧮
Tags: javascript, webdev, beginners, programming
Published: 2022-09-19 12:40:44

As mentioned in my [last article](https://dev.to/dcodeyt/5-must-know-javascript-dom-methods-3e33), I think writing **vanilla JavaScript** is the best way to build a strong understanding of the [most popular programming language](https://insights.stackoverflow.com/survey/2021) in the world 🌏

Let's have a look at 5 more **must know** JavaScript DOM methods 👇

## 1. [`scrollIntoView()`](https://youtu.be/_H5gV0Fyg0I?t=5)

This method is perfect for building user interfaces.

When calling `scrollIntoView()` on an off-screen element, the web browser will smoothly bring the element into view by scrolling.

```js
/*
    HTML:
    <div>
        <p>Dummy Text</p>
        <p>Dummy Text</p>
        <p>Dummy Text</p>
        <p>Dummy Text</p>
        <p>Dummy Text</p>
        ... and so on
    </div>
*/

const someParagraph = document.getElementById("important");

// The browser will bring #someParagraph into view
someParagraph.scrollIntoView({
    behavior: "smooth"
});
```

I suggest you run the above code after creating a lot of `<p>` tags to see how it works.

## 2. [`contains()`](https://youtu.be/_H5gV0Fyg0I?t=81)

If any DOM method were to be underrated, it'd be this one.

The `contains()` method will tell you if an element is a descendant of another. Let me demonstrate with an example.

```js
/*
    HTML:
    <ul id="fruit">
        <li>Apple</li>
        <li>Pear</li>
        <li>
            <strong id="strongOrange">Orange</strong>
        </li>
        <li>Grape</li>
    </ul>
*/

const fruitList = document.getElementById("fruit");
const strongOrange = document.getElementById("strongOrange");

// Output: true 💪
console.log(fruitList.contains(strongOrange));
```

As you can see, the `<strong>` tag didn't need to be a **direct** child of `#myList`, it just needed to be a descendant.

## 3. [`cloneNode()`](https://youtu.be/_H5gV0Fyg0I?t=142)

If you've ever had trouble making copies of an element, pay attention to this method.

As the name suggests, `cloneNode()` will **clone** the method that it's called on. This can also help with building user interfaces as once an element is copied, you may wish to update it with new data.

```js
/*
    HTML:
    <ul id="cars">
        <li>Sedan</li>
        <li>Hatch</li>
        <li>Wagon</li>
    </ul>
*/

const carsList = document.getElementById("cars");

// Get the first <li> so we can copy it
const existingItem = carsList.querySelector("li");

const newItem = existingItem.cloneNode();

newItem.textContent = "4WD";
carsList.appendChild(newItem);
```

After running this code, `<li>4WD</li>` will be on the `#cars` list. Please note that this will only create a **shallow** copy. If you want to make a **deep** copy, you can pass `true` as an argument.

## 4. [`after()`](https://youtu.be/_H5gV0Fyg0I?t=272)

There's nothing more exciting than finding new ways to append elements to the DOM 😎

The `after()` method allows you to append one or more elements or text nodes **after** another element. Being able to append multiple elements at once is very useful.

```js
/*
    HTML:
    <ul id="drinks">
        <li>Water</li>
        <li id="softDrink">Soft Drink</li>
        <li>Juice</li>
    </ul>
*/

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

const milkshake = document.createElement("li");
const cordial = document.createElement("li");

milkShake.textContent = "Milkshake";
cordial.textContent = "Cordial";

softDrink.after(milkShake, cordial);
```

Once this code runs, both `<li>Milkshake</li>` and `<li>Cordial</li>` will exist after `<li>Soft Drink</li>`, respectively.

## 5. [`remove()`](https://youtu.be/_H5gV0Fyg0I?t=372)

The simplest method on this list comes in last place.

As the name suggests, the `remove()` method will remove an element from the DOM. This is a convenient alternative to `removeChild()`.

```js
const someParentElement = document.getElementById("parent");
const toRemove = someParentElement.querySelector("span");

// Using removeChild()
someParentElement.removeChild(toRemove);

// Using remove()
toRemove.remove();
```

As you can see in the above example, you **don't** need to reference the parent element to remove a child element when using `remove()`.

And that's it! Hope you enjoyed this list 😁

## [Enrol Now 👉 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/dp5n5if9qtd11ecip1cl.jpg)

Happy coding 😎