Live extension playground
NOTE: documentation is currently updating to reflect changes in version 2. If you use 1st version please use v1.7.7 tag.
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.
I'd recommend to read one from the articles below to understand the main ideas of the library: Introduction into the better-dom library in English @smashingmagazine.com Введение в библиотеку better-dom по-русски @habrahabr.ru
- lightweight: ~22kb minified and ~5kb gzipped version (custom builds are available to reduce file size even more)
- clear, minimalistic and standards-based (where possible) APIs
- live extensions
- animations via CSS3
- microtemplating using the Emmet syntax
- improved event handling
- getter and setter
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 before the end of
<body> on your web page:
- Read the FAQ
- Take a look at the better-dom wiki
- Check releases tab for getting the changes log
- Walk through the sorce code of existing projects that use better-dom.
- DOM.create vs jquery
- DOM.find[All] vs jQuery.find
- DOM getter/setter vs jQuery.attr/prop
- better-dom vs jquery: classes manipulation
- better-dom vs jquery: array methods
Notes about old IEs
For IE8-9 support you have to incude extra files via the conditional comment below into
<head> on your page:
<!--[if IE]> <link href="bower_components/better-dom/dist/better-dom.htc" rel="htc"/> <script src="bower_components/es5-shim/es5-shim.js"></script> <script src="bower_components/html5shiv/dist/html5shiv.js"></script> <![endif]-->
html5shiv provides a fix for HTML5 tags in IE8.
es5-shim is used to polyfill/fix missed standards-based functions for
The better-dom.htc 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.
- Safari 6.0+
- Firefox 16+
- Opera 12.10+
- IE8+ (see notes)
- iOS Safari 6+
- Android 2.3+
- Chrome for Android
Opera Mini is out of the scope because of lack of support for CSS3 Animations.