Add Remove Class to a DOM element using only JavaScript, and best of these 2 ways

Question

What is a good approach to add class to a DOM element using JavaScript. And Remove also.

I came across this following codes for adding:

1:

Element.prototype.addClassName = function (cls) {
    if (!this.hasClassName(cls)) {
        this.className = [this.className, cls].join(" ");
    }
};

2:

document.querySelector(element).classList.add(cls)

Both of them seem to work for me. What is the difference between them and which is the best?

jQuery does it really nicely, just properly attribute the work to jQuery and use theirs. — Travis J, Dec 31 '12 at 18:21
@TravisJ, I don't want to add an extra 90+ KB of JavaScript to my page, just for adding removing classes :) — Premshankar Tiwari, Dec 31 '12 at 18:23
is hasClassName another function you already have access to? — kinakuta, Dec 31 '12 at 18:23
I believe @TravisJ meant that you can look at how they do it and use their code :) — Tom Pietrosanti, Dec 31 '12 at 18:23
@kinakuta Query selector really isn't needed here. I don't know why the OP insists on it. — jeremy, Dec 31 '12 at 18:27
@TomPietrosanti, All old and new. IE6 as well. If there is really an awesome way that does not work with IE6, I am ready to give up IE6 only then — Premshankar Tiwari, Dec 31 '12 at 18:55
You should probably drop IE6 anyway, if possible. Microsoft has stopped supporting it. http://www.ie6countdown.com/ — Tom Pietrosanti, Dec 31 '12 at 19:43

Om Shankar · Accepted Answer · 2016-02-28T06:23:56.363

1. If you are moved by the word prototype, you might want to check MDN Docs - Inheritance and prototype chain.

2. The first code you mentioned is a normal cross-browser way of adding a class to an element.
Instead of being a function declaration, its added as a method to the Element's prototype - so that when you query an Element by its id (good ol' JavaScript), you can simply call the method on the element itself.

3. The second code you have posted is per the new DOM Specification. W3 Link. It will work only in those browsers that implement the DOM Level 4 Specs. It won't work in old browsers.

That goes the difference.

For the best method, a native method is always the best and fastest.
So for the browsers that support clasList, the second should be the best. Per my opinion though, till things (drafts) are not finalized you might want to consider a method that works cross-browser and is compatible with both JavaScript (ECMA-3) and supported DOM Spec.

A simple idea should be to change the className, a property accessible in all new and old browsers, and append your class as a string to it:

var el = document.getElementById(id);
el.className = el.className + " " + cls; 
// mind the space while concatening

Of course you can add validation methods like using regex for trimming spaces while adding and removing.

By the way, I got the full part of the code you posted as the 1st Example:

Element.prototype.hasClassName = function(name) {
    return new RegExp("(?:^|\\s+)" + name + "(?:\\s+|$)").test(this.className);
};

Element.prototype.addClassName = function(name) {
    if (!this.hasClassName(name)) {
        this.className = this.className ? [this.className, name].join(' ') : name;
    }
};

Element.prototype.removeClassName = function(name) {
    if (this.hasClassName(name)) {
        var c = this.className;
        this.className = c.replace(new RegExp("(?:^|\\s+)" + name + "(?:\\s+|$)", "g"), "");
    }
};

score 8 · Answer 2 · answered Dec 31 '12 at 18:41

This is jquery's code.

Adapted versions of jQuery's addClass
And jQuery's removeClass

If you look at jQuery source code, this is how they do it. This is adapted from them, but pretty much entirely written by jQuery and is their code. I am not the original author, and am merely showing how one piece can be used instead of the whole library.

jQuery's addClass:

//This code is jQuery's
function AddClassToElement(elem,value){
 var rspaces = /\s+/;
 var classNames = (value || "").split( rspaces );
 var className = " " + elem.className + " ",
 setClass = elem.className;
 for ( var c = 0, cl = classNames.length; c < cl; c++ ) {
  if ( className.indexOf( " " + classNames[c] + " " ) < 0 ) {
   setClass += " " + classNames[c];
  }
 }
 elem.className = setClass.replace(/^\s+|\s+$/g,'');//trim
}

jQuery's removeClass:

//This code is jQuery's
function RemoveClassFromElement(elem,value){
 var rspaces = /\s+/;
 var rclass = /[\n\t]/g
 var classNames = (value || "").split( rspaces );
 var className = (" " + elem.className + " ").replace(rclass, " ");
 for ( var c = 0, cl = classNames.length; c < cl; c++ ) {
  className = className.replace(" " + classNames[c] + " ", " ");
 }
 elem.className = className.replace(/^\s+|\s+$/g,'');//trim
}

Here is a working fiddle: http://jsfiddle.net/C5dvL/

Add Remove Class to a DOM element using only JavaScript, and best of these 2 ways

2 Answers2

This is jquery's code.

Linked