How To Do DOM Manipulation In VanillaJS

Gone are the days when we used to attach those monstrous libraries like JQuery and Zepto to our Web Pages whenever we wanted to interact with the DOM. though many in-built functions were available back then too but they were not very accessible and most of the time very difficult to use.

But now things have changed and we should not use JQuery or even its so-called lightweight alternative Zepto because nearly all DOM Manipulation APIs that they used to offer, now come built-in. I Know many of you guys already know about these APIs, but the target audience of this post is the next wave of beginner Javascripters and People who want to migrate their existing projects from JQuery or create their new projects using Vanilla Javascript.

So, Today I will introduce you guys to these Vanilla JS DOM Manipulation functions and a few code snippets which can save you from using JQuery or Zepto.

Selecting an element using document.querySelector & document.querySelectorAll

In JQuery we used the $(selector) function for selecting DOM Nodes using CSS Selector strings, in vanilla we can use document.querySelector(selector) function to select the first matching element and document.querySelectorAll(selector) function for selecting all of the elements that match the selector string.

Example:

HTML File

  <div id="test">Hello World</div>

  <div id="test2">Hello Again?</div>

Javascript File

  const test = document.querySelector('#test'); // div#test

  const divs = document.querySelectorAll('div'); // [div#test, div#test2]

Adding, Removing, Toggling Classes

To Add a class:-

  element.classList.add('class1'); // adds the class1 to the element

  element.classList.add('class1', 'class2', 'class3'); // we can add multiple class names as well

To Remove a class:-

  element.classList.remove('class1'); // removes the class1 from element

  element.classList.remove('class1', 'class2'); // removes class1 and class2 from the element

To Toggle a class:-

  element.classList.toggle('class1'); 
  // if the element already has the class class1 it removes it 
  // and if it doesn't it will add the class to the classList

To check if an element has a class or not:-

  element.classList.contains('class1'); // true if it has class class1

Adding styles to an element

There are multiple ways to add styles to an element but my favorite one is this one liner:- Object.assign(element.style, { /* ... */ });

Example:-

  Object.assign(element.style, {

    color: 'red',

    background: 'blue',

    // you can add as many as you want

  });

I hope the above examples will be useful for someone who is new to JavaScript.

This is my first post on the dev.to network so please pardon me if I have made any mistake and don't hesitate to post any suggestions in the comment section.

Jai Hind!