How to implement a library that has similar features to jQuery?

What you want is called chaining. You need to have an object (while in your code you have a function), and all its methods return the object itself. A simple example of the principle, using a literal object:

var obj = {
    umMetodo: function() {
        console.log('um método');
        return this;
    },
    outroMetodo: function() {
        console.log('outro método');
        return this;
    }
}

var retorno = obj.umMetodo().outroMetodo();
//                  ^-- retorna obj!  ^-- idem!

// Isto é verdadeiro:
retorno == obj;

In order to work as in jQuery, where $ (or jQuery ) is a function, it needs to return an object that represents the selected element, not the element itself as you do today. This object will give you access to the methods you want to chain. Your code does not seem to want to handle collections, so that's one less problem to solve.

The first attempt would be to make the function need to return this , but that's no use. In a function call as $() , this will always be the window object, which does not help. You need this to be something that makes sense, to represent an element of the DOM.

The solution is to force $ to be called as a constructor function, even if the call was not new $() . This is simple to verify. When you execute new $() , this is defined as the object being instantiated, an object whose type is the constructor function itself. Just check the type of this , using this principle:

function $(param, outro) {
    // chama novamente com new se o tipo não estiver certo
    if(!(this instanceof $)) return new $(param, outro);

    // ... faz o que precisar ...

    // só chega aqui se chamou com new
    return this;
}

There are two things left: wrap the element in this new object and create the methods. The easiest way to wrap is to store the element in a property of your object. In all the methods you want to chain, it will be available through the property. Putting these two things, your code will look like this:

function $(el, index) {
    if(!(this instanceof $)) return new $(el, index);
    
    if(index) {
        this.el = document.querySelectorAll(el)[index-1];
    } else {
        this.el = document.getElementById(el) || document.querySelector(el);
    }
    
    return this;
}

// No protótipo do tipo, você define todos os métodos:
$.prototype.inner = function(txt) {
    this.el.innerHTML = txt;
    return this;
}
$.prototype.azul = function() {
    this.el.style.color = 'blue';
    return this;
}

// Teste
$('paragrafo').inner('testando').azul();

<p id="paragrafo"></p>

The JQuery code is public, why not take a peek at how they do it to take inspiration? :) If you want a hint, these files here contain the part that defines the "builder" of jQuery.

link
link

Returning to your question, you were right to predict that what you need is a "builder" instead of returning the querySelectorAll response directly. And that's what jQuery does: jQuery("foo") is an object of the "jQuery" class and you need to jQuery("foo").get(0) to access the DOM element directly.

To implement this is not very difficult. Just create a class for your builder and put all the methods you want into it. "Linkable" methods such as your "DoSomething ()" and "MakeSomethingCase ()" also return builders (usually this itself) and "accessor" methods like "get" and "toArray" return miscellaneous values and end chain of methods.

function toArray(x){
    return Array.prototype.slice.call(x);
}


function RenanQuery(el, index){
    //this._els são os elementos selecionados pelo seletor 'el'.
    //Para ser uniforme, sempre armazenamos como um vetor.
    if(index != null){
        this._els = [ document.querySelectorAll(el)[index] ]
    }else{
        this._els = toArray( document.querySelectorAll(el) );
    }
}

$ = function(el, index){
    return new RenanQuery(el, index);
}

//Métodos acessadores retornam valores quaisquer
RenanQuery.prototype.get = function(n){
    return this._els[n];
}

//Métodos "encadeáveis" retornam o próprio this ou um outro objeto "RenanQuery"
RenanQuery.prototype.each = function(callback){
    for(var i=0; i<this._els.length; i++){
        callback.call(this._els[i], i, this._els[i]);
    }
    return this;
}

RenanQuery.prototype.inner = function(txt){
    for(var i=0; i<this._els.length; i++){
        setInnerText(this._els[i], txt);
    }
    return this;
}

The full version will have more or less this face. The biggest change that is missing is to allow you to create RenanQuery objects from things that are not selector strings. For example, it would be nice to be able to create a RenanQuery element from a DOM node or a list of DOM nodes.

To do this you can put a lot of ifs inside the RenanQuery constructor or you can change the RenanQuery constructor to something lower level and put the whole magic in the "$".