DOMtastic
- Small, fast, and modular DOM & Event library for modern browsers.
- Same familiar API as jQuery (but without the extra "weight" of modules like
$.ajax
,$.animate
, and$.Deferred
). - Dependency-free. Weighs in at only 1KB to 12KB (minified), depending on included modules. Full bundle is about 4KB gzipped.
- Works great stand-alone or paired up with e.g. Backbone or Angular.
- The source is written in ES6 format.
- Rollup and babel are used to create a UMD bundle (supporting AMD, CommonJS, and fallback to browser global).
- Supercharge your components and extend from the base class.
- Easy to create a custom build to include or exclude parts.
- DOMtastic also serves as a starting point for your own application-specific DOM API (read more).
Quicklinks
- Bundled sources: domtastic.js, domtastic.min.js
- API documentation
- Run tests
- Coverage: Istanbul, Coveralls
- Run benchmarks
Usage
ES6 (with e.g. Babel)
npm install domtastic
import $ from 'domtastic';
CommonJS (with e.g. Browserify)
npm install domtastic
var $ = require('domtastic');
AMD
bower install domtastic
requirejs.config({ baseUrl: 'bower_components', packages: [ { name: 'domtastic', main: 'domtastic' } ] }); require(['domtastic'], function($) { $('.earth').addClass('evergreen').on('sunrise', '.people', awake); });
Browser Global
<script src="//cdn.jsdelivr.net/npm/domtastic"></script>
$('.planet').addClass('evergreen').on('sunrise', '.grass', grow);
ES6 Class
import $ from 'domtastic'; class MyComponent extends $.BaseClass { progress(value) { return this.attr('data-progress', value); } } let component = new MyComponent('.my-anchor'); component.progress('ive').append('<p>enhancement</p>');
Read more in the baseClass article or the docs.
API
Array
every filter forEach (alias: each) indexOf map pop push reduce reduceRight reverse shift some unshift
CSS
css
DOM
after append before clone prepend
DOM/attr
attr removeAttr
DOM/class
addClass hasClass removeClass toggleClass
DOM/contains
contains
DOM/data
data prop
DOM/extra
appendTo empty remove replaceWith text val
DOM/html
html
Event
on (alias: bind) off (alias: unbind) one
Event/ready
ready
Event/trigger
trigger triggerHandler
NoConflict
noConflict
Selector
$ find matches
Selector/closest
closest
Selector/extra
children concat contents eq first get parent siblings slice
Type
isArray isFunction
Util
extend
But it doesn't even have awesomest-method!
As mentioned in the introduction, DOMtastic doesn't feature methods for Ajax, Animation, Promise, etc. Please find your own libraries to fill in the gaps as needed. Here are just some examples:
- Ajax: microjs#ajax, rest.js
- Animation: microjs#animation, Move.js, Animate.css
- Promises: when.js, RSVP.js
Please note that you can extend the $.fn
object, just like jQuery Plugins.
Feel free to open an issue if you feel an important method is missing.
Browser Support
Latest versions of Chrome, Firefox, Safari, Opera, Android, Chrome Mobile iOS, and Mobile Safari. Internet Explorer 10 and up. IE9 requires a polyfill for classList
.
Performance
Run the benchmark suite to compare the performance of various methods of jQuery, Zepto and DOMtastic (tl/dr; it's fast!).
Custom Build
You can build a custom bundle that excludes specific modules that you don't need:
git clone [email protected]:webpro/DOMtastic.git cd DOMtastic npm install npm run bundle -- --exclude=css,dom/html,event/trigger
Alternatively, you can do the opposite and include what you need:
npm run bundle -- --include=array,selector/index,dom/class
Find the output in the dist/
folder.
jQuery Compatibility
Some iterator method signatures in jQuery are different (i.e. non-standard), most notably the index
before element
argument in each
, filter
and map
). However, a custom build that is compatible with jQuery can be created by using the --jquery-compat
flag:
npm run bundle -- --jquery-compat
Build a custom API for your application
You can also build a custom API from the ground up. By default, DOMtastic does it for you, but you can easily do it yourself in a highly custom approach. Grab the $
function from the selector
, and extend the $.fn
object with methods from specific modules:
var selector = require('domtastic/commonjs/selector'), dom = require('domtastic/commonjs/dom'); var $ = selector.$; $.fn = {}; $.fn.append = dom.append; // Or e.g. _.extend($, dom) $.fn.prepend = dom.prepend; module.exports = $;
This way, you don't have the slight overhead of the UMD boilerplate in a custom bundle, and a single location/module to define the API for your application. Works great with either AMD or Browserify.
Tests
Run the hosted test suite in your browser. You can also clone this repo, and run the tests locally with jsdom (using npm test
). Run npm run test:bs
to run the tests in real browsers using BrowserStack.
Credits
Many thanks to these sources of inspiration:
Thanks to the jsDelivr Open Source CDN for hosting DOMtastic.
Thanks to BrowserStack for their real device cloud.