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"
});
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));
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);
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);
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();
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 👇
Happy coding 😎