- 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
). - Weighs in at only 3 to 14KB (minified), depending on included modules. Full bundle is under 5KB gzipped.
- Works great stand-alone or paired up with e.g. Backbone or Angular.
- The source is written in ES6 format, and transpiled to AMD and CommonJS with babel.
- Browserify is 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).
- Bundled sources: domtastic.js, domtastic.min.js
- API documentation
- Run tests
- Coverage: Istanbul, Coveralls
- Complexity: Plato
- Run benchmarks (results: class, constructor, DOM, selector)
npm install domtastic
var $ = require('domtastic');
bower install domtastic
requirejs.config({
baseUrl: 'bower_components',
packages: [{
name: 'domtastic',
location: 'domtastic/amd'
}]
});
require(['domtastic'], function($) {
$('.earth').addClass('evergreen').on('sunrise', '.people', awake);
});
<script src="//cdn.jsdelivr.net/domtastic/0.11/domtastic.min.js"></script>
$('.planet').addClass('evergreen').on('sunrise', '.grass', grow);
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.
every
filter
forEach (alias: each)
indexOf
map
pop
push
reduce
reduceRight
reverse
shift
some
unshift
css
after
append
before
clone
prepend
attr
removeAttr
addClass
hasClass
removeClass
toggleClass
contains
data
prop
appendTo
empty
remove
replaceWith
text
val
html
on (alias: bind)
off (alias: unbind)
ready
trigger
triggerHandler
noConflict
$
find
matches
closest
children
contents
eq
get
parent
siblings
slice
isArray
isFunction
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.
Latest versions of Chrome, Firefox, Safari, Opera, Android, Chrome Mobile iOS, and Mobile Safari. Internet Explorer 10 and up. IE9 only needs a polyfill for classList
to make these tests pass.
Run the benchmark suite to compare the performance of various methods of jQuery, Zepto and DOMtastic (tl/dr; it's fast!).
You can build a custom bundle that excludes specific modules that you don't need:
git clone git@github.com:webpro/DOMtastic.git
cd DOMtastic
npm install
bin/custom --exclude=attr,html,trigger
Alternatively, you can do the opposite and include what you need:
bin/custom --include=selector,class
Find the output in the dist/
folder.
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:
bin/custom --jquery-compat
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.
Run the hosted test suite in your browser. You can also clone/fork the sources from Github, and run the tests locally (using npm test
).
Many thanks to these sources of inspiration:
Thanks to jsDelivr for hosting DOMtastic.