How to replace a class in vanilla JS

It's really easy to replace a class in vanilla JS. You just need to call the DOMTokenList.replace() method on the element's classList property:

// Get the h1 element
const h1 = document.querySelector('h1');

// Replace .old-class with .new-class
h1.classList.replace('old-class', 'new-class');

The DOMTokenList.replace() method is supported in all modern browsers. You can view the full browser support info in the MDN Web Docs.