Simple Element Selection for JavaScript w/o jQuery

ses.js

// Element Selection - _("#howcoolisthat") - https://gist.github.com/moqmar/55587fad606176fafbcf7777655f2fbe

// document.querySelector
window._  = document.querySelector.bind(document)

// document.querySelectorAll with callback
window.__ = function (selector, callback, element) {
    var elements = Array.prototype.slice.call((element||document).querySelectorAll(selector));
    if (typeof callback == "function")
        for (var i = 0; i < elements.length; i++)
            if (callback.call(elements[i], elements[i]) === false) break;
    return elements;
}

// Element.querySelector
Element.prototype._  = Element.prototype.querySelector

// Element.querySelectorAll with callback
Element.prototype.__ = function(selector, callback) {
    return __(selector, callback, this)
}

ses.min.js

// Element Selection - _("#howcoolisthat") - https://gist.github.com/moqmar/55587fad606176fafbcf7777655f2fbe
(function(w,e){w._=document.querySelector.bind(document)
w.__=function(s,c,e){var e=Array.prototype.slice.call((e||document).querySelectorAll(s))
if(typeof c=="function")for(var i=0;i<e.length;i++)if(c.call(e[i],e[i])===!1)break;return e}
e._=e.querySelector;e.__=function(s,c){return __(s,c,this)}})(window,Element.prototype)

~README.md

Simple Element Selection for JavaScript

document.getElementsByClassName(".example-class")[0] is soo long - especially when you need it like a dozen times over a few lines. SES makes this statement _(".example-class") - feels a bit like jQuery, but it's actually just a wrapper around document.querySelector in 207 bytes.

Similarly, changing an attribute for multiple elements used to look like this:

var e = document.querySelectorAll(".example");
for (var i = 0; i < e.length; i++) e[i].title = "Hello World"

With SES (well, and ES6), you can now use that:

__(".example", E=> E.title = "Hello World")

Usage

<script src="https://cdn.rawgit.com/moqmar/55587fad606176fafbcf7777655f2fbe/raw/ses.min.js"></script>
<!-- You should actually just copy ses.min.js into your code to get rid of the HTTP overhead! -->

// First element
 _("div") // ➜ <div>…</div>

// Multiple elements
__("div") // ➜ [<div>…</div>, …]

// Children of a parent element only
 _("div").__("span") // ➜ [<span>…</span>, …]

// Callback loop
__("div", function() {
  this.style.fontFamily = "Comic Sans MS"
}) // ➜ [<div>…</div>, …]

// Callback loop with break condition
__("div", function() {
  this.style.fontFamily = "Comic Sans MS"
  if (this.classList.contains("break-now")) return false // Break callback loop
}) // ➜ [<div>…</div>, …]

Compatibility

SES is compatible with all major browsers, with Internet Explorer 9+, and (with limited functionality) with Internet Explorer 8.
More information

---

public domain / cc0