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"]');

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');

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
}

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
});

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

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
});

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');
  });
}