Vanilla JavaScript in the browser now has many of the features of jQuery built in,
Therefore, we don’t need to use jQuery to do many things.
In this article, we’ll look at the vanilla JavaScript equivalent of jQuery features.
Selecting Elements
We can use the querySelector method to select a single element with the given selector in vanilla JavaScript.
Vanilla JavaScript also has the querySelectorAll method to select multiple elements with the given selector with vanilla JavaScript.
For instance, we can write:
document.querySelector("div");
to select the first div in the document.
And select all the divs with:
document.querySelectorAll("div");
querySelectorAll returns a NodeList object, which is an iterable object with all the selected nodes inside.
In jQuery, we have:
$("div");
to select all the divs.
Run a Function on All Selected Elements
In jQuery, we can run a function on all selected elements.
For instance, we can hide all the divs by writing:
$("div").hide();
To do the same thing with vanilla JavaScript, we can use the forEach method:
document.querySelectorAll("div")
.forEach(div => {
div.style.display = "none"
})
We can also use the for-of loop:
for (const div of document.querySelectorAll("div")) {
div.style.display = "none"
}
The NodeList returned by querySelector can also be spread:
const divs = [...document.querySelectorAll("div")]
divs
.forEach(div => {
div.style.display = "none"
})
divs is now an array instead of a NodeList.
This means we can run many array methods on it.
Finding an Element within Another
To find an element within another with jQuery, we use the find method:
const div = $("div");
//...
div.find(".box");
To do the same thing with vanilla JavaScript, we can use querySelector to find one element and querySelectorAll to find all instances of the element with the given selector.
So we write:
const div = document.querySelector('div')
//...
div.querySelector(".box");
to find the first element with class box in the div.
And we write:
const div = document.querySelector('div')
//...
div.querySelectorAll(".box");
to find all elements with class box in the div.
Traversing the Tree with parent(), next(), and prev()
jQuery has the parent method to get the parent element of an element.
jQuery’s next method returns the next sibling element of an element.
And jQuery’s prev method returns the previous sibling element of an element.
To use them, we can write:
$("div").next();
$("div").prev();
$("div").parent();
In vanilla JavaScript, we can write:
const div = document.querySelector("div");
div.nextElementSibling;
div.previousElementSibling;
div.parentElement;
nextElementSibling returns the next sibling element.
previousElementSibling returns the previous sibling element.
And parentElement returns the parent element.
Working with Events
jQuery lets us add event handlers easily to an element.
For instance, we can write:
$("button").click((e) => {
/* handle click event */
});
$("button").mouseenter((e) => {
/* handle click event */
});
$(document).keyup((e) => {
/* handle key up event */
});
to add a click event handler, mouseenter event handler, and keyup event handler on the element that’s selected respectively.
To do the same thing with vanilla JavaScript, we can use the addEventListener method:
document
.querySelector("button")
.addEventListener("click", (e) => {
/* ... */
});
document
.querySelector("button")
.addEventListener("mouseenter", (e) => {
/* ... */
});
document
.addEventListener("keyup", (e) => {
/* ... */
});
We just select the element with querySelector and call addEventListener with the event name as the first argument and the event handler callback as the 2nd argument.
Conclusion
We can do many basic DOM operations like selecting elements, traversing the DOM tree, and adding event listeners to elements with vanilla JavaScript.
