Click here to Skip to main content
15,799,017 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
note: I'm JavaScript beginner, so excuse me if this question is too naive.

I'm customizing this jquery alternative small original-library[^] which works the way I want and returns a nodes array(not array-like-object) which can be used with native javascript methods like forEach, slice etc.

But I want to slim it down and optimized only for modern browsers using prototype closure (actually I don't know much about prototype closure, but I want to use it because I heard it saves memory).

Please help me. I hope your help can get rid of my headache & stress I'm having from last 3 days. I asked this question on StackOverflow which went unanswered.
failed to build simple JQuery alternative with prototype closure and returning array to work with native JavaScript methods - Stack Overflow[^]

What I have tried:

(function() {
  'use strict';
  var d = document,
    w = window;

  //Function to loop through node array
  function nodeLoop(fn, nodes) {
    for (var i = 0, len = nodes.length; i < len; i++) {
      fn(nodes[i], i, nodes);

  // Get nodes, convert them to array and return chibi
  function chibi(selector) {
    var cb, nodes = [],
      json = false,
      nodelist, i, len;

    if (selector) {
      // Element node, would prefer to use (selector instanceof HTMLElement) but no IE support
      if (selector.nodeType && selector.nodeType === 1) {
        nodes = [selector]; // return element as node list
      } else if (typeof selector === 'object') {
        json = (typeof selector.length !== 'number');
        nodes = selector;
      } else if (typeof selector === 'string') {
        nodelist = d.querySelectorAll(selector);
        len = nodelist.length;
        for (i = 0; i < len; i += 1) {
          nodes[i] = nodelist[i];

    console.log('Selected nodes:' + nodes); //until here, it is working & shows selected node as array

    // Only attach nodes, not JSON.
    //cb = json ? {} : nodes; //removed. this line used in org-library when working with functions without prototype
    //return cb; //removed. this line used in org-library when working with functions without prototype

  function cb(selector) {
    return new chibi(selector);

  //Public functions (are these public methods or private. please tell me this as well. thanks)
  chibi.fn = chibi.prototype = {
    on: function(event, fn) {
      //==>may be problem here; "this" shows [Obj Obj] why not array. this.length undefined
      console.log(this + this.length);
      nodeLoop(function(elm) {
        elm.addEventListener(event, fn, false);
      }, this);
      return this;
    html: function(value) {
      if (value || value == '') {
        nodeLoop(function(elm) {
          elm.innerHTML = value;
        }, this);
        return this;
      if (this[0]) {
        return this[0].innerHTML;
    //,constructor: chibi //I used this from another question on StackOverflow but still did not work (btw what is it?)

  //Expose Chibi's global namespace here ($)
  window.$ = cb;

//this code works correctly if I use with org-library, but not with my modified version using prototype way.
$('.heading').on('mouseover', function(event) {
  $(this).html('replacing heading text');
  //using "slice" to test if selector is working with native array methods. don't tell me it can be done with $('ul li:last-of-type'). BTW it works with org-library.
  $($('ul li').slice(2)).forEach(function(elm, index) {
    //third li innerHTML should be replaced. works with org-library.
    elm.innerHTML = index;

  <h1 class="heading">This is demo Heading</h1>
    <li>first li</li>
    <li>second li</li>
    <li>third li</li>

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900