bling dot js

readme.md

bling.js

Because you want the $ of jQuery without the jQuery.

---

You may be interested in bling.js if you get tired of the Array.from(document.querySelectorAll('.foo')).forEach(… rodeo. It does this:

// forEach over the qSA result, directly.
document.querySelectorAll('input').forEach(el => /* ... */);

// on() rather than addEventListener()
document.body.on('dblclick', evt => /* ... */);

// classic jQuery + on()
$$('p').on('click', el => /* ... */);

It doesn't do anything else. This is not a jQuery equivalent.

Notes:

• on() works on elements, document, window, and results from querySelector & querySelectorAll.
• $ is qSA so if you're grabbing a single element you'll have to [0] it.
  • In Nov 2024 I made a breaking change (ya know, 10yrs later) where $$ is qSA and $ is qS. This matches how these symbols are defined within DevTools Console.
• Bling plays well with authoring ES6 (and beyond!)
• Resig explored this stuff a while ago: github.com/jeresig/nodelist
• Bling works everywhere.

Nerdy implementation notes:

• The NodeList prototype usually inherits from Object, so we move it to Array.
• I'm curious how ES6/7 would let a NodeList be iterable and inherit from EventTarget. 2024 Paul here: whelp, they added iterable to NodeList but not EventTarget. seems good.
• Setting Node.prototype.on = EventTarget.prototype.addEventListener is awesome. It works in Chrome/FF but not yet in IE/Safari.
• I haven't set up any off() or trigger() to map to dispatchEvent & removeEventListener. I'm OK with that.
  • See comments for alternatives where folks have more fleshed out editions of this.

Typescript declaration

(Added 2024..)

declare global {
  interface Node {
    on(name: string, fn: EventListenerOrEventListenerObject): void;
  }

  interface Window {
    on(name: string, fn: EventListenerOrEventListenerObject): void;
    $(selector: string): Element | null;
    $$(selector: string): NodeListOf<Element>;
  }

  interface NodeList extends Array<Node> {
    on(name: string, fn: EventListenerOrEventListenerObject): void;
  }
}

bling.js

/* bling.js */
window.$ = document.querySelector.bind(document);
window.$$ = document.querySelectorAll.bind(document);
Node.prototype.on = window.on = function(name, fn) { this.addEventListener(name, fn); };
NodeList.prototype.__proto__ = Array.prototype;
NodeList.prototype.on = function(name, fn) { this.forEach((elem) => elem.on(name, fn)); };

Combine this with promise.js and get "Promise Bling"?

Paul you are right. If I worked on nodes, lot of time, I have faced this kind of problem. This is the nice solution for [].slice.call(). But querySelector/querySelectorAll have some browser issue so for this have you any solution?

Line 9 is my favorite.

I want moar! 😃 Great stuff.

can be reffered to by its short url: git.io/blingjs

Line 9 should be replaced with the following:

Object.setPrototypeOf(NodeList.prototype, Array.prototype)

which is part of ES6 and currently supported in IE 11, FF and Chrome - for older browsers, this is a quick polyfill:

if (!Object.setPrototypeOf) {
  Object.setPrototypeOf = function(obj, proto) {
    obj.__proto__ = proto;
    return obj; 
  }
}

Also +1 for Node.prototype.on and NodeList.prototype.on returning this, my versions are:

  Node.prototype.on = window.on = function(names, fn) {
    var self = this

    names.split(' ').forEach(function(name) {
      self.addEventListener(name, fn)
    })

    return this
  }

  NodeList.prototype.on = NodeList.prototype.addEventListener = function(names, fn) {
    this.forEach(function(elem) {
      elem.on(names, fn)
    })

    return this
  }

which also allow binding multiple events like jQuery e.g. node.on('change blur', function(ev) { ... } :)

have you tried ki.js? :D https://github.com/dciccale/ki.js

Doing this is somewhat a bad practice:

NodeList.prototype.__proto__ = Array.prototype;

NodeList.prototype.on = NodeList.prototype.addEventListener = function (name, fn) {
  this.forEach(function (elem, i) {
    elem.on(name, fn);
  });
}

Don't mess with the native prototypes!

Why don't you try it this way?

window.$ = document.querySelectorAll.bind(document);

Node.prototype.on = window.on = Node.prototype.addEventListener;

NodeList.prototype.on = NodeList.prototype.addEventListener = function (name, fn) {
     Array.prototype.slice.call(this).forEach(function(elem) {
         elem.addEventListener(name, fn, false);
     });
}

What about changing the prototype of HTMLCollection as well so they are easier to iterate over? You can find HTMLCollection's in properties like ParentNode.children

Not sure of the side effects, yet.

HTMLCollection.prototype.__proto__ = Array.prototype;

put code in github repo - https://github.com/stevermeister/bling.js/blob/master/bling.js
to make it open & conveninent for contribution

Better $ to querySelector and $$ to querySelectorAll instead of $('.something')[0].on(...).

Inspired by this to make a version here https://github.com/dosaygo-coder-0/postjs/blob/master/postbling/src/postbling.js

What's new?

• on applies to EventTargets and Arrays containing them, so you can do this:

$('*').slice(3).on('click', reveal );

• querySelectorAll is aliased to a Template tag function so you can also do this for less keystrokes:

$`div`.on( 'touchstart', dragOn ).on( 'touchend', dragOff );

• NodeList and HTMLCollection both now delegate to Array
• the on functions return this to allow chaining
• and made it more ES5/6/7-y including Object.setPrototypeOf

These included ideas from @MadLittleMods and @spiralx and @joa

@bjankord awesome. thanks for the tip. Sadly some of us do have to support IE9... 🎉

This does NOT work for DOM elements inside iframes. Here's the related SO question with a related code sample - based on the same principles as above code - with a reproducible example - http://stackoverflow.com/questions/42825990/extending-prototype-of-dom-elements-inside-iframes
Any ideas anyone?

https://medium.com/@devlucky/nodelist-object-is-finally-an-iterator-cc529d6e2490

Is this safe to use in production?

@Ollie-w yeah totally.

I think I have an interesting fork:

• only mutates the nodes queried with the exported function
• offers 'off'
• offers nice attribute CRUD operations

https://github.com/argyleink/blingblingjs

@AdaRoseCannon has a nice extension of this idea which maps ALL things in the Element prototype onto the NodeList prototype https://gist.github.com/AdaRoseCannon/d95a7cbb8edd730443c62f0daff875ac

Similiar:
https://github.com/nuxodin/domProxy
A (proxied) Nodelist with all Apis of Elements (also future).

Updated the impl today (just slightly). $ was qSA but.. I made it qS and introduced $$ as qSA. This matches the behavior that's in our browser devtools' console. (And what I typically manually change whenever I grab this script).

Also, obviously the comments are full of far more fully featured and well packaged scripts that are similar, but more.

Apologies for the email on something you commented on 10 years ago. <3 have a nice friday!