DOM Manipulation in Vanilla JavaScript

The most common library for DOM manipulation in web development is jQuery. jquery helps in selecting, transforming, and animating HTML elements, which helps in making more dynamic and interactive web pages. However, the demand for jQuery has decreased as modern browsers develop which provide more advanced features in vanilla javascript.

In this post, we’ll learn the features of vanilla JavaScript for DOM manipulation and display the same results which were produced through jquery.

1. Selecting Elements:

For Single Element Selection:
In jQuery, elements are selected using the familiar ‘$()’ syntax. For example, to select an element with the ID “myImage,” you would use $(‘#myImage’). But In vanilla JavaScript, you can select the elements using the document. querySelector() method:

// jQuery
const element = $('#myImage');

// Vanilla JavaScript
const element = document.querySelector('#myImage');

For Multiple Element Selection:
To Select multiple elements at the same time we can use the ‘document.queryselectorAll()’ method

Do you want to learn HTML to React? 🔥

If yes, then here is our Master HTML to React 📚 In this eBook, you’ll Get Complete Free Hand Written Notes on HTML, CSS, JavaScript, and React 💪. It includes 450 Projects with source code. and 250+ Most Asked Interview Questions

Get your eBook now! 👇

Tap Me for eBook ➡️

// jQuery
const elements = $('.myImage');

// Vanilla JavaScript
const elements = document.querySelectorAll('.myImage');

2. Manipulating CSS:

Using the .addClass(), .removeClass(), and .css() functions in jQuery,can be used to add, remove, or change CSS classes easily. But in JavaScript, we can directly change the classList property in Vanilla. JavaScript to add or remove classes, and the style property to change CSS styles

// jQuery
$('#myImage').addClass('highlight');
$('#myImage').removeClass('active');
$('#myImage').css('color', 'blue');

// Vanilla JavaScript
const element = document.querySelector('#myImage');
element.classList.add('highlight');
element.classList.remove('active');
element.style.color = 'blue';

3. Event Handling:

Using jQuery we can handle the events with methods like on() and click(). In vanilla JavaScript, we can use the add.EventListener() method to handle events like click(),onkeypress() etc.

// jQuery
$('#myButton').click(function() {
  alert('Button clicked!');
});

// Vanilla JavaScript
const myButton = document.querySelector('#myButton');
myButton.addEventListener('click', function() {
  alert('Button clicked!');
});

4. Adding and Removing HTML content:

In the DOM, HTML content can be added and removed. We’ll see three ways for adding and removing HTML elements

The innerHTML property is the easiest method to add and remove HTML text. We can use innerHTML to either acquire or set HTML content. However, when using innerHTML to set HTML content, be careful because it replaces the existing HTML content with the new one.

function ShowHelloMessage() {
    var name = document.getElementById("myname");
    document.getElementById("hellomessage").innerHTML = "Hello, " + name.value;
}
document.getElementById("mybutton").onclick = ShowHelloMessage;

The other two methods are createElement(), createTextNode(), and appendChild(). These functions can be used to add and remove HTML elements.

A new HTML element can be created using the createElement function. To add a new element to an existing element, use appendChild, and to construct a text node, use createTextNode.

// jQuery
$('.myList').append('<li>New Item</li>');

// Vanilla JavaScript
const newItem = document.createElement('li');
newItem.textContent = 'New Item';
const myList = document.querySelector('.myList');
myList.appendChild(newItem);

5. Animations:

Using jquery we can add various animation methods like .fadeIn(), .fadeOut(), and .slideUp(). While these can be convenient, modern CSS has evolved to include powerful animations using the @keyframes rule.Also we can use vanilla JavaScript to add and remove classes that trigger these animations

// jQuery
$('#myImage').fadeOut(1000, function() {
  // Animation complete.
});

// Vanilla JavaScript
const element = document.querySelector('#myImage');
element.classList.add('fade-out');
element.addEventListener('animationend', function() {
  // Animation complete.
});

CSS:

@keyframes fadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

.fade-out {
  animation: fadeOut 1s;
}

I want to show that using plain JavaScript to manipulate the DOM is not difficult. Using vanilla javascript we can manipulate DOM easily with the help of modern browser. All the DOM manipulation we learnt today is most important and commonly used in javascript. I hope this helps in understanding DOM manipulation through javascript.

If you find out this Blog helpful, then make sure to search Codewithrandom on Google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

Follow: CodewithRandom
Author: Arun