Create a function to get selectors like jquery does with pure javascript

Question

I am tired of including jquery in simple projects but I am so used to using it and I am trying to break free form my dependency on it. I am trying to create a function that will give the same feel of getting selectors like classes and tags. Example: $('selector').innerHTML = ".something";. I have just been looping through them one by one like so:

var classElements = document.querySelectorAll('.something');
for (var i = classElements.length - 1; i >= 0; i--) {
   classElements[i].innerHTML = "This Is A Div";
} 

But I wanted to create a function where I could just loop through a selector without having to write out a for loop for everything that I want to find. So I could just write it our like above $('.something').innerHTML = "something";

So far this is what I have but it will only get the first of each selector and won't get all of them. Needless to say I am very stuck and the more I read on the subject the more confused I get. I was wondering if someone could point me in the right direction where my thinking is flawed or explain how jquery goes about doing this. Here is my code:

window.getElements = function(selector) {
    var selectors = document.querySelectorAll(selector);
    for (var i = selectors.length - 1; i >= 0; i--) {
        var elements = selectors[i];
    }
    return elements;
};

getElements(".something").innerHTML = "something";

Here is a fiddle Fiddle

Answer 1

Here is how you would do it. I have done what you have asked which is allow you to use all the native functionality rather than coin wrappers around it. jQuery returns its own api which acts on the selectors. What I have done is create a selector which allows you to act on each element it finds

window.getElements = function(selector,cb) {
    var selectors = document.querySelectorAll(selector);
    [].forEach.call(selectors, cb);
};

getElements(".something", function(el){el.innerHTML = "ha"});

getElements("#one", function(el){el.style.background = "red" });

It takes the dom list that is found, converts it into an array and then calls your passed function where you pass your native code

Here is a fiddle

https://jsfiddle.net/y52f4wh8/5/

Jquery works differently:

window.jquery = function(selector,cb) {
	var selectors = document.querySelectorAll(selector);
    
    function command(cb) {
	   [].forEach.call(selectors, cb);
	};
    // Here we return our own api that uses the command function to act on
    // our selected list.
    return {
     html: function(str){
     	command(function(el){
      	el.innerHTML=str;
      });
      
     },
     bg: function(color){
     	command(function(el){
      	el.style.background = color; 
      });
     }
    }
};
// The jquery way!
jquery(".something").html("ha");