better-dom: Live extension playground
Build Status Coverage Status Bower version

This library is about ideas. After some time of using jQuery I found that it's just too big, has lack of features I need and some desicions of the API design is debatable. In particular live extensions was one of the main ideas that encouraged me to build a new library from scratch.


Sauce Test Status



The simplest way is to use bower:

$ bower install better-dom

This will clone the latest version of the better-dom with dependencies into the bower_components directory at the root of your project. Then just include the script below on your web page:

<script src="bower_components/better-dom/dist/better-dom.js"></script>



In order to modify the source and submit a patch or improvement, you have to have gulp installed globally:

$ npm install -g gulp

The project uses set of ES6 transpilers to compile a file that works in current browsers. The command below starts watching for changes you are doing, recompiles build/better-dom.js file and runs unit tests after that:

$ npm start

Of course any pull request should pass all tests.

Notes about old IEs

For IE8-9 support you have to incude an extra file via the conditional comment below into <head> on your page:

<!--[if IE]>
    <script src="bower_components/better-dom/dist/better-dom-legacy.js"></script>

This file bundles several important addons for IE8-9:

  1. es5-shim is used to polyfill/fix missed standards-based functions for Array, Object, Function, Date classes.
  2. html5shiv solves issue with HTML5 tags in IE8
  3. polyfill/fix for the input event in IE8-9
  4. change event fix for checkboxes and radio buttons in IE8
  5. fix for bubbling of the submit and reset events in IE8

Later the library downloads file. This file helps to implement live extensions support. And that fact applies several important limitations which you should be aware of in case when legacy browser support is needed:

1) HTC behaviors.aspx) have to serve up with a content-type header of “text/x-component”, otherwise IE will simply ignore the file. Many web servers are preconfigured with the correct content-type, but others are not:

AddType text/x-component .htc

2) IE requires that the HTC file must be in the same domain with as the HTML page which uses it. If you try to load the behavior from a different domain, you will get an “Access Denied” error.

Browser support


  • Chrome
  • Safari 6.0+
  • Firefox 16+
  • Internet Explorer 8+ (see notes)
  • Opera 12.10+


  • iOS Safari 6+
  • Android 2.3+
  • Chrome for Android

Opera Mini is out of the scope because of lack of support for CSS3 Animations.



comments powered by Disqus