Sign in
Log inSign up
Extending NodeList in JavaScript

Extending NodeList in JavaScript

Robert van der Elst's photo
Robert van der Elst
·Feb 4, 2016

So, I've been playing around with the idea of building a minimal and modular Javascript framework for fun and learning.

It's based on Remy Sharp's min.js and I'm trying to extend it from there with help from You Might Not Need jQuery and MicroJS.

And it works so far, which quite an accomplishment, considering my level of Javascript ;)

So far, I've got this working:

  • .addClass()
  • .removeClass()
  • .toggleClass()
  • .before()
  • .after()
  • .prepend()
  • .append()
  • .show()
  • .hide()
  • .toggle()
  • .css()

What I've done so far is just extending NodeList with functions like this:

NodeList.prototype.functionname = function () { ... }

So now it's just a list with functions really, nothing organized or anything.

I was just wondering if it's possible to clean it up a little like with the Method Pattern? Something like this (pseudo code!)

NodeList.prototype.extend({
    addClass: function () {
        ...
    },

    removeClass: function () {
        ...
    },

    // Etc. etc. etc.
});

Not sure if it's even possible though, but that's why I turn to you guys! :)

If needed, I can put the file somewhere (HTML, CSS and JS combined... bad practice, I know...)

2