Skip to content
Live extension playground
JavaScript HTML
Find file
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

better-dom Build Status

Live extension playground

jQuery knows a concept called “live events”. Using the idea of event delegation they enabled developers to handle existing and future elements. But more flexibility is required in a lot of cases. For example, delegated events fall short when the DOM needs to be mutated in order to initialize a widget. To handle such cases I'd like to introduce live extensions and better-dom - a new library for working with the DOM.




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 scripts below on your web page:

<!DOCTYPE html>
    <!--[if IE]>
        <link href="bower_components/better-dom/dist/" rel="htc"/>
        <script src="bower_components/better-dom/dist/better-dom-legacy.js"></script>
    <script src="bower_components/better-dom/dist/better-dom.js"></script>


Need more?


How to make a custom build

In order to create a custom build make sure that you installed grunt-cli globally:

npm install -g grunt-cli

Then you can print all available modules for customization via the task below:

grunt build

Pick modules that you want to exclude and pass them to the same task separated by comma:

grunt build:classes,offset,data

Look at the API documentation to find which functions are included into a particular module.

Your custom build will be created inside of the build folder including uglified version and source maps.

Notes about old IEs

For IE8-9 support you have to incude extra files via conditional comment (see Installation section).

The better-dom-legacy.js file includes excellent html5shiv that provides fix for HTML5 tags and es5-shim is used to polyfill missed standards-based functions. These projects are bundled into signle file with other fixes.

The file helps to implement live extensions support. This fact applies several important limitations that you must know in case when legacy browser support is required.

Setup content-type header

HTC behaviors 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

Same domain limitation

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+
  • Opera 12.10+
  • IE8+


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

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

Something went wrong with that request. Please try again.