Javascript - DOM Manipulation without jQuery
Tags: javascript, beginners, learning
Published: 2018-06-29 09:57:09

---

title: Javascript - DOM Manipulation without jQuery
published: true
description: 
tags: #javascript #beginners #learning
---
![alt text](https://s3-eu-west-1.amazonaws.com/wia-flarum-bucket/2018-06-29/1530273375-100728-blog-04.png)

Often, developers tend to rely on libraries like [jQuery](https://jquery.com/) 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](https://developer.mozilla.org/en-US/docs/Web/API/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](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection)), and `document.getElementsByTagName()` for getting a *live* list of elements that match a selector (returns a [HTMLCollection](https://developer.mozilla.org/en-US/docs/Web/API/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](http://api.jquery.com/on/)). 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');
  });
}
```