5 Must Know JavaScript DOM Methods ๐Ÿ”€

5 Must Know JavaScript DOM Methods ๐Ÿ”€

ยท

3 min read

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 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()

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.

/*
    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()

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.

/*
    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 family โž•

3. insertAdjacentHTML()

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
/*
    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()

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 ๐Ÿ˜Ž

/*
    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()

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.

/*
    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

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

Course Thumbnail

Enjoy! ๐Ÿ˜Ž

ย