How would I write this JQuery addClass method in vanilla js

Question

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.

Answer 1

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');