DEV Community 👩‍💻👨‍💻

Austin Spivey for Wia

Posted on

Javascript - DOM Manipulation without jQuery

alt text

Often, developers tend to rely on libraries like jQuery for basic DOM manipulation like querying elements, adding/removing classes, adding event listeners etc. A lot of resources point to jQuery as a solution for these things, but in reality, using it just for the basics is probably overkill for your website. The vanilla Javascript DOM API is more than capable of basic DOM manipulation, and being able to drop jQuery will mean a decrease in page load speed! Here's a run down of the basics in vanilla Javascript.

Querying DOM elements

There are a few methods you can use to query a DOM element in vanilla Javascript, the most common being document.querySelector(). This method takes a CSS selector as an argument, and returns the first match for that selector. Here's how to use it:

var mySelector = document.querySelector('.my-selector');
var paragraph = document.querySelector('p');
var hiddenInput = document.querySelector('input[type="hidden"]');
Enter fullscreen mode Exit fullscreen mode

If you want to get all occurrences of a selector (for example, all the <h1> tags on the page), use document.querySelectorAll(). This method returns a NodeList. Here's how to use it:

var headings = document.querySelectorAll('h1');
var listLinks = document.querySelectorAll('li a');
var items = document.querySelectorAll('.my-selector > p strong');
Enter fullscreen mode Exit fullscreen mode

To further manipulate them, you can simply iterate over them. There are a few ways to do this, the most straightforward being a for loop or a for of loop.

var headings = document.querySelectorAll('h1');

for (var i = 0; i < headings.length; i++) {
  var heading = headings[i];
  // do something with heading here
}

for (var heading of headings) {
  // do something with heading here
}
Enter fullscreen mode Exit fullscreen mode

In recent browsers, you can also use the forEach() method on NodeLists:

var headings = document.querySelectorAll('h1');

headings.forEach(function(heading) {
  // do something with heading here
});
Enter fullscreen mode Exit fullscreen mode

Other methods for querying DOM elements are document.getElementById() for getting the first element that matches an ID, document.getElementsByClassName() for getting a list of elements that match a class (returns a HTMLCollection), and document.getElementsByTagName() for getting a live list of elements that match a selector (returns a HTMLCollection).

The difference between getElementsByTagName() and querySelectorAll() is that getElementsByTagName() returns a live list, meaning that it will update if an element is added dynamically.

Adding/removing classes

A really common DOM manipulation is adding or removing a class from an element. Luckily, this is very easy to achieve with vanilla Javascript.

var button = document.querySelector('button');

button.classList.add('small');
button.classList.remove('large');
button.classList.toggle('active'); // if element has class 'active' then remove it, otherwise add it
Enter fullscreen mode Exit fullscreen mode

Adding event listeners

Adding an event listener (like 'click', 'scroll' etc) is quite simple with vanilla JS. Simply use the addEventListener() method on a DOM element, passing in an event type and a callback function (similar to jQuery's on method). Here's how to use it:

var button = document.getElementById('button');

button.addEventListener('click', function(event) {
  // do something here
});
Enter fullscreen mode Exit fullscreen mode

Putting it all together

Now that we've learned the basics of DOM manipulation, let's put them all together:

// Query all button elements
var buttons = document.querySelectorAll('button');

// Iterate through the buttons
for (var button of buttons) {
  // Add a 'click' event listener to each button
  button.addEventListener('click', function() {
    // Add a class to the clicked button
    this.classList.add('active');
  });
}
Enter fullscreen mode Exit fullscreen mode

Top comments (2)

Collapse
 
ikemkrueger profile image
Ikem Krueger

That was to the point. I like it. :)

Collapse
 
emmatechdel profile image
Emma-tech-del

So simple and eazy to understand..thank you

Super Useful CSS Resources

>> Check out this classic DEV post <<