Question

I have a js function that is named getID which is basically return document.getElementById(id)

I want to make another function, getTag that would return getElementsByTagName.

The part that I can’t seem to manage is that I want to be able to call them like this:

getID('myid').getTag('input') => so this would return all the input elements inside the element with the id myid

Thanks!

ps: getTag would also have to work if it’s called by it’s own, but then it would just return document.getElementsByTagName

UPDATE:

Thanks to all that have replied! Using your suggestions I came up with this, which works well for me:

function getEl(){
    return new getElement();
}

function getElement() {
    var scope = document;

    this.by = function(data){
        if (data.id)    scope = scope.getElementById(data.id);
        if (data.tag)   scope = scope.getElementsByTagName(data.tag);

        return scope;
    }
}

and I use it like this:

var inputs = getEl().by({id:"msg", tag:"input"});

Answer 1

Basically, you’re going to create a single object that contains each of your methods and also stores all data returned by the native functions. It would look something like this (not tested, but you get the idea):

var MyLib = {
    getID: function(id) {
        var element = document.getElementById(id);
        this.length = 1;
        this[0] = element;
        return this;
    },
    getTag: function(tag) {
        var elements;
        if (this.length) {
            for (var i = 0; i < this.length; i++) {
                var byTag = this[i].getElementsByTagName(tag);
                for (var j = 0; j < byTag.length; j++) {
                    elements.push(byTag[j]);
                }
            }
        }
        for (var i = 0; i < elements.length; i++) {
            this[i] = elements[i];
        }
        this.length = elements.length;
        return this;
    }
};

You can then use it like this:

var elements = MyLib.getID('myid').getTag('input');
for (var i = 0; i < elements.length; i++)
    console.log(elements[i]); // Do something

The only real problem with this approach (besides it being very tricky and hard to debug) is that you have to treat the result of every method like an array, even if there is only a single result. For example, to get an element by ID, you’d have to do MyLib.getID('myid')[0].

However, note that this has already been done before. I recommend you take a look at jQuery, if only to see how they accomplished this. Your code could be simplified to this:

$("#myid input")

jQuery is more lightweight than you think, and including it on your page will not slow it down. You have nothing to lose by using it.