CODEWITHSUNDEEP
javascriptjquery
anaheimducks07
anaheimducks07

Reputation: 53

How would I write this JQuery addClass method in vanilla js

So how exactly would i write 

$('div').addClass('border1');

in Vanilla javascript, like what would my add class method look like. So far what I have is, 

function addClass(x,y) {
    x.className += " " + y;
}

but i know this is wrong, as the parameters are off. Im really lost.

Upvotes: 5

Views: 3964

Answers (5)

EyalAr
EyalAr

Reputation: 3170

Let's take a closer look at what jQuery does here.

What is the meaning of $('div')?

In jQuery terms it means "select all 'div' elements in the document".
$('div') is a jQuery object which represents all div elements in the document. But nowhere in this code you specifically target a single DOM element by yourself.

Let's write our own simplified selection object "MySelect":

/**
 * `MySelect` object constructor.
 */
function MySelect(selector){
    this.elementList = document.querySelectorAll(selector);
}

Now let's use it:

var divs = new MySelect('div');
divs.elementList; // all `div` elements in the document.

(Note that querySelectorAll is a native javascript DOM method)

Now that we have an elements selection object, let's add an addClass method to it:

/**
 * Add the specified class to all elements selected by this object.
 */
MySelect.prototype.addClass = function(cls){
    var i, e;
    for (i = 0; i < this.elementList.length ; i++){
        e = this.elementList[i];
        e.className += " " + cls;
        // can also use e.classList.add
    }
}

And voila:

divs.addClass('xyz');

This, in a very simplified fashion, is how jQuery works.

For the $ syntax you can do:

function $(selector){
    return new MySelect(selector);
}

And use it as usual:

$('div').addClass('xyz');

Upvotes: 8

David Thomas
David Thomas

Reputation: 253318

I write this not so much as a recommendation, but because you seem to want to create a method, rather than a function; presumably under the impression that one might be better. They're much the same, however, except extending the prototype to add a method can potentially cause trouble. However, if you must:

NodeList.prototype.addClass = function (cName) {
    // creates an Array from the NodeList, and iterates through:
    return [].forEach.call(this, function (elem) {
        // adds the passed-in class-name:
        elem.classList.add(cName);
    });
};

The above can be called with:

document.querySelectorAll('div').addClass('newClassName');

Or:

document.getElementsByTagName('div').addClass('newClassName');

Note that this uses features found in relatively modern browsers, though they could be replaced with a for loop (forEach) and string-concatenation with className property (classList.add()) if desired.

Upvotes: 0

Barmar
Barmar

Reputation: 781058

function addClass(selector, class) {
    els = document.querySelectorAll(selector);
    for (var i = 0; i < els.length; i++) {
        els[i].className += class;
    }
}

Then you can do:

addClass('div', 'border1');
addClass('#someID', 'someclass');
addClass('.someClass', 'someotherclass');

Upvotes: 0

William Fortin
William Fortin

Reputation: 777

If you're targetting IE10+, you can use 

 var el = document.getElementById("someId");
 el.classList.add(className);

For all browsers :

if (el.classList)
   el.classList.add(className);
else
   el.className += ' ' + className;

Source: http://youmightnotneedjquery.com/#add_class

Upvotes: 1

code_monk
code_monk

Reputation: 10130

element.classList is vanillaJS's way of doing it

var x = document.getElementById('x');
var y = document.getElementById('y');
var z = document.getElementById('z');

y.addEventListener('click',function(){

  x.classList.add('blue');

});

z.addEventListener('click',function(){

  x.classList.toggle('blue');

});
#x {
  width: 50px;
  height: 50px;
  border: 1px dotted gray;
}

.blue {
  background-color: blue;
}
<div id="x"></div>

<button id="y">add the class</button>
<button id="z">toggle the class</button>

Upvotes: 4

Related Questions