Adding and Removing classes for a DOM node without JQuery

Now one may ask why do one need to add/remove classes from DOM nodes, and why not do it the easy way with JQuery.

The answer to the first part of (why add/remove the classes from DOM nodes), the primary reason is to modify the behavior of the DOM node on the fly. For example, to animate the DOM node or change any other interactive behavior.

Animating the DOM nodes can be achieved in multiple ways, from using the JQuery animations to using specialized CSS (such as Animate CSS). Manipulating the DOM nodes through code, such as Javascript or JQuery, is a possible way to animate the nodes, but using CSS is much preferred way to do it, since browsers optimize the rendering path for CSS animations (thus you need not be worried about the animation freezing while large content is being loaded or computation happening in the background).

However, the CSS animations suffers one major problem: If you load the CSS from external files (and not specified directly in the html), then browser does not apply the style till all the css file is received fully from the server, which could mean layout-tearing if the CSS file is large (which would be the case if you use building tools such as Brunch, Gulp etc, which concatenate multiple CSS into single file).

For the question of, why not add/remove classes using JQuery, we refer back to the above situation of large CSS files. If you are using JQuery throughout your site, then perhaps it does not matter and you can use JQuery (or similar library) to manipulate the classes. But loading JQuery just for manipulating the DOM classes is waste of resources, especially on slower networks (such as mobile web users). The problem being, till the JQuery is loaded you cannot perform any animations, such as indicating progress updates etc.

If you are doing class animations on critical paths (such as indicating the progress updates to user at the time of initial page loading), then responsiveness is very important. It is like programming the bootloader of your OS, where you do not have the luxury of any higher level API other than the lower level kernel routines.

The preferred way to deal with classes in such as situation is, using light-weight libraries such as classie, or even better writing your own one or two lines code as below:

Adding a class to the node: This one is easy, just append your class name the className property of the element.

   document.querybyid('elemID').className += 'loading'; 

Removing the class for the node is slightly involved task because the node may be having more than one class applied to it and the className property is just a single string of all class names in a line, which means we have to do an exact string search in that the remove all the occurrences of our class name that we want to remove. For example to remove the ‘loading’ class from the body tag,

   document.body.className = document.body.className.replace(/(^|\s)loading\b/g, ''); 

The regular expression goes a global search for the exact word, which means it is safe even in case we added a class multiple times (by mistake).

Comments