DEV Community

Cover image for Another 5 Must Know JavaScript DOM Methods ๐Ÿงฎ
Dom (dcode)
Dom (dcode)

Posted on

Another 5 Must Know JavaScript DOM Methods ๐Ÿงฎ

As mentioned in my last article, I think writing vanilla JavaScript is the best way to build a strong understanding of the most popular programming language in the world ๐ŸŒ

Let's have a look at 5 more must know JavaScript DOM methods ๐Ÿ‘‡

1. scrollIntoView()

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.

/*
    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"
});
Enter fullscreen mode Exit fullscreen mode

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

2. contains()

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.

/*
    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));
Enter fullscreen mode Exit fullscreen mode

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

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.

/*
    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);
Enter fullscreen mode Exit fullscreen mode

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

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.

/*
    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);
Enter fullscreen mode Exit fullscreen mode

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

5. remove()

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

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

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

// Using remove()
toRemove.remove();
Enter fullscreen mode Exit fullscreen mode

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

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

Happy coding ๐Ÿ˜Ž

Top comments (1)

Collapse
 
devope profile image
Kirill Devope

Very nice