fnd.js is performance-oriented DOM selector micro-library intended to use in modern browsers. It uses querySelectorAll but falls back to (still) more performant getElementsByTagName, getElementsByClass, and getElementById when possible.
It is not jQuery-like and will never be. When it can't find elements, it returns null, so you can detect errors in your selectors early. Early errors are good, empty arrays are misleading.
Found elements are wrapped in plain array (not some obscure NodeList), which you can work with using Array#map, Array#reduce and other cool FP things.
npm install hogart/fnd --save
or
bower install hogart/fnd
fnd supports CommonJS and AMD module loaders and bad old browser globals.
This is tricky, as different parts of fnd have different requirements. Basically minimum is IE9+, but if you're not using fnd.is/fnd.evt and stick to one-word selectors by tag name or ID, you should be fine even in IE6. If you're not using fnd.is, but want more complex selectors, then IE8 it is.
fnd.is requires some kind of support of .matches method, which means IE9+. Same goes for fnd.evt.
Since fnd relies on browser selector engine, it supports only what browser supports. Experience shows that tagName.className .someChildren covers about 95% of your selecting abilities, and this works even in IE8.
varelements=fnd('.some[selector]');// equivalent to fnd('.some[selector]', document);fnd.is('.some')(elements[0]);// truevarisSomeOther=fnd.is('.some-other');// result of fnd.is is a functionelements.filter(isSomeOther);varlist=fnd('ul.someList');// this is optimized and internally just shortcut for fnd('li', list[0])varitems=fnd('li',list);// This is not optimized. It would walk every node in `items` and search for `a` inside that node.varhrefs=fnd('a',items).map(function(link){returnlink.href;});// array of urls in order of appearance in documentAlso refer to tests for examples.
fnd.evt provides adding event listeners via Backbone-like event maps. Example:
varwidget={title: 'I am some widget',onSubmit: function(event){// either describe your methods in some object/class...console.log(this.title);// 'I am some widget'event.preventDefault();// event is vanilla DOM event}}vareventMap={'submit form': 'onSumbit',// method name from context'reset form': function(event){// ...or use function literals in event map, or mix and matchconsole.log(this.title);// again, 'I am some widget'}}varoff=fnd.evt(fnd('.some-element')[0],eventMap,widget);// off is a function which, when called, removes event listenersfnd.evt relies on fnd.evt.on, which is wrapper for EventTarget.addEventListener with event delegation support:
// it accepts 3 or 4 arguments and returns a functionvaroff=fnd.evt.on(fnd('.some-element')[0],// DOM node'submit',// event namefunctiononSubmit(event){},// event handler'form'//selector, optional);Returns a function which, when called, removes event listener.
npm run unit && npm run lint
Contributions are welcome, especially so if you make sure that your changes passes lint and unit-tests.