Download

• DOMAssistant 2.8.1 Complete
• DOMAssistant 2.8.1 Compressed

Change Log

• [Fix] attribute selector [value*=''], [value^=''] and [value$=''] do not work in IE
• [Fix] :empty does not select elements that contain only comment nodes in IE
• [Fix] setAttributes() does not work in IE9
• [Fix] Special events handling in IE9
• [Fix] Selecting dashed attributes does not work in IE
• [Fix] Unable to select empty attributes in IE
• [Fix] :not([attrib]) does not work in IE

• Event delegation, with support for form events (focus, blur, submit, reset, change, select)
• Element storage
• The harmony mode
• New array extras
• removeEvent enhancement
• Cross-browser support for mouseenter/mouseleave events
• New hasChild method to allow testing for descendant

For a complete list of changes and bug fixes, please refer to the release notes. The documentation has also been updated for both online and offline reading.

Note that there is a potential imcompatiblity with version 2.7.x in events handling. Do read about it on the beta 1 release post.

Thank you and we hope you like the latest DOMAssistant!

Changes since beta 4:

• [Chg] clientX/Y are now left untouched. Use pageX/Y instead to retrieve mouse coordinates relative to the top left of a document
• [Fix] mouseenter/mouseleave do not work in relayEvent
• [Fix] Event.relatedTarget incorrect in IE
• [Fix] Event objects are sometimes ‘fixed’ more than once
• [Fix] $(window).addEvent() adds the event twice in certain browsers

Download

• DOMAssistant 2.8 RC 1, Complete (50KB)
• DOMAssistant 2.8 RC 1, Compressed (29KB)

Work is now concentrated on stabilization and performance enhancement.

Changes since beta 3:

• [New] Added relayEvent support for form events submit/reset/change/select
• [New] Cross-browser support for mouseenter and mouseleave events
• [Chg] removeEvent() now removes all events that are bound to an element (including inline ones) when triggered without arguments
• [Fix] [selected=selected], [readonly=readonly] now work the same as [selected], [readonly]
• [Fix] Memory leakage associated with data storage and events
• [Fix] Minor performance improvement in internal cleanUp method

Download

• DOMAssistant 2.8 beta 4, Complete (50KB)
• DOMAssistant 2.8 beta 4, Compressed (29KB)

Feature set for DOMAssistant 2.8 will be freezed from this point onward. Now time for bug hunting and fixing!

• [New] Ability to avoid global namespace collision of $ and $$ with DOMAssistant.harmonize()
• [Fix] ID selectors containing $ and = do not work
• [Fix] Some events cannot be removed via removeEvent, such as mutation events

Introducing the ‘harmony’ mode

The harmony mode allows DOMAssistant to live with other Javascript libraries on the same page without conflict. To use it, just invoke DOMAssistant.harmonize(), like so:

<script type="text/javascript" src="DOMAssistantCompressed.js"> </script>
<script type="text/javascript">
    DOMAssistant.DOMReady( function() {
        // Use $ and $$ like you always have
    } );
    DOMAssistant.harmonize();
    var divs = DOMAssistant.$('div');
</script>
<script type="text/javascript" src="AnotherLib.js"> </script>

Download

• DOMAssistant 2.8 beta 3, Complete (48KB)
• DOMAssistant 2.8 beta 3, Compressed (28KB)

We appreciate if you could report any abnormalities you might find in this beta. Version 2.8 is now closer to release than ever!

• [Chg] Updated implementation of event.clientX/Y and event.relatedTarget
• [Chg] focus/blur on IE now uses activate/deactivate instead of focusin/focusout for better IE5.5 support
• [Fix] Regression bug where event handler cannot be added again after being removed.
• [Fix] :nth-of-type, nly-of-type buggy in IE
• [Fix] Negated pseudo-classes do not work
• [Fix] Selectors that start with >, + and ~ do not work in IE
• [Fix] Comment nodes not skipped in IE for certain selectors
• [Fix] setStyle(‘display’, ‘none’) does not work properly in IE when the element is relatively positioned

Download

• DOMAssistant 2.8 beta 2, Complete (48KB)
• DOMAssistant 2.8 beta 2, Compressed (28KB)

Although beta 2 has been tested rigorously on the updated unit test suite, please report any bugs you might find.

Event delegation

For those new to event delegation, it is the idea of attaching event handlers onto parent elements rather than on individual elements, base on the fact that events bubble up the DOM tree. Event delegation offers some compelling benefits: less memory consumption, faster events setup and automatic binding of future elements. Such events are sometimes referred to as ‘live’ events.

Event delegation in DOMAssistant 2.8 is provided by the new relayEvent() and unrelayEvent() methods. If you have an unordered list of 100 items and you want to attach an onclick handler onto each of them, you can now use delegation instead:

$('ul#myLinks').relayEvent('click', 'li', jumpToPage);

In addition to all events that bubble, focus and blur are also supported:

$('form').relayEvent('focus', 'input[type=text]', function() {
    this.addClass('yellow');
});

And they can be removed with unrelayEvent():

$('ul').unrelayEvent('click');

Element storage

In web application development it is a common requirement to associate arbitrary data with DOM elements. While it can be done by direct property assignment, doing so poses a high risk of memory leak, particularly in Internet Explorer. DOMAssistant strives to provide a system for storing and retrieving data from DOM elements in a safe and reliable manner via element storage. It can be extremely useful for plugin developers, and is now also used internally by DOMAssistant Events module.

To store data, simple write:

$$('elem').store('foo', 'bar');
$$('child').store( { 'name': 'Tom', 'age': 6, 'sex': 'M' } );

And to retrieve them:

var foo = $$('elem').retrieve('foo');   //bar
var age = $$('child').retrieve('age');  //6

Removing data is as easy:

$$('elem').unstore('foo');
$$('child').unstore();   //Removes all data

As a bonus, calling retrieve on an element without a parameter returns its unique ID.

Javascript 1.6 array extras

The DOM element collection returned by the dollar function $ is essentially an array, so naturally we should be able to use the snazzy Javascript 1.6 array extras on them. Well, except one thing: not all browsers are created equal. DOMAssistant attempts to fill this gap by enabling indexOf(), map(), filter(), every() and some() on all supported browsers. The existing each() method also receives a boost and is ‘breakable’ by returning false from the callback function.

$('#navigation a').each( function(elem, idx) {
    alert('This is item ' + idx);
    if (idx === 5) return false;    // Stop counting after 5
});

var elm = $$('content');
var idx = $("div").indexOf(elm);

// Creates an array of element ID
var arrayID = $('div').map( function() {
    return this.id;
});

var oddItems = $('div').filter( function(elem, idx) {
    return (idx % 2 === 1);
});

var allHaveChildren = $('div').every( function() {
    return (this.childNodes.length > 0);
});

var someHaveChildren = $('div').some( function() {
    return (this.childNodes.length > 0);
});

Unit test suite

DOMAssistant 2.8 is systematically tested using a comprehensive test suite built around the SugarTest framework. This new testing process ensures minimal regressions during code change. As of this writing, the unit test case count stands at 869, and they are passed by all supported browsers.

So what are the supported browsers anyway?

Tests are run against:

Internet Explorer: 5.5, 6.0, 7.0, 8.0
Mozilla Firefox: 1.0, 1.5, 2.0, 3.0, 3.5*
Google Chrome: 1.0, 2.0, 3.0*
Opera: 9.0, 9.2, 9.5, 9.6, 10.0*
Apple Safari: 3.1, 3.2, 4.0

With that, a total of 20 past, present and upcoming mainstream browsers pass the DOMAssistant 2.8 test suite with a 869/869 score. Or 100%.

Unfortunately, support for IE5.0 has now been dropped.

Breaking change

While DOMAssistant 2.8 intends to be fully backward-compatible with previous versions, there is one potential breaking change that you might want to take note of. The Events module now passes a ‘synthetic’ event object to the callback functions, instead of the native object. This has the benefit of neutralizing differences between W3C-compliant event objects and IE’s, and allow overwriting of read-only attributes. The second point is in fact necessary in the implementation of event delegation.

However, not all native properties have been ported over to the synthetic event object. Current supported properties are type, bubbles, cancelable, target, currentTarget, button, keyCode, charCode, altKey, ctrlKey, shiftKey, clientX, clientY and timeStamp, and methods preventDefault() and stopPropagation(). If your code only uses the above properties and methods, it should be safe. Otherwise, the native object is still present and can be retrieved:

$('a').addEvent('click', function(e) {
    e.preventDefault();
    var native = e.event;
    alert(native.returnValue);
});

Download Beta 1 now!

Help make DOMAssistant 2.8 a solid release by taking the public beta for a test drive. Feedback welcomed!

• DOMAssistant 2.8 beta 1, Complete (47KB)
• DOMAssistant 2.8 beta 1, Compressed (27KB)
• Beta 1 release notes

We are pleased to announce that your favorite Javascript library has just received an update! Yes, it’s a zero-point-zero-one version increment, but make no mistake about it – DOMAssistant 2.7.3, while continuing its promise of being extremely light and fast, sees the addition of some much requested features and fixes, including:

Support for “opacity” with getStyle() and setStyle()

You can now get or set the opacity of an element with the following syntax. It works across browsers, of course.

elm.setStyle("opacity", 0.5);
elm.setStyle({ color: "blue", opacity: 0.3 });
var opacity = elm.getStyle("opacity");    // 0.3

JSON response native parsing with eval fallback

If the responseType is set to “json” in an Ajax call, DOMAssistant will attempt to evaluate the response with the native JSON.parse function whenever possible.

elm.ajax({
    url: "getDateTime.php",
    responseType: "json",
    callback: function (obj) {
        var date = obj.date;
        var time = obj.time;
    }
});

Support for timeout and exception handling in Ajax

Two optional parameters, “timeout” and “exception”, have been added to Ajax setup config. As their names suggest, they allow you to define the timeout interval for an Ajax request, and an exception handler to deal with the situation whenever error arises. Timeouts are considered a type of error as well.

elm.ajax({
    url: "getDateTime.php",
    responseType: "json",
    callback: function (obj) {
        var date = obj.date;
        var time = obj.time;
    },
    timeout: 5000,    //in ms
    exception: function (err) {
        alert("Error: " + (err.message || err.description));
    }
});

Enhanced removeEvent() capable of removing all handlers binded to an event

Previously you must specify the event and the function reference if you need to remove an event handler. This means anonymous functions and inline event handlers could never be removed without some brute forces. This issue has now been addressed with the improved API that allows you to omit the function reference in a removeEvent() call.

elm.removeEvent("click", doSomething);   // Removes the doSomething click event handler
elm.removeEvent("click");                // Removes all click event handlers

Exceptional performance

DOMAssistant 2.7.3 now leads other major libraries by an even larger margin in selector’s performance. It also stacks up pretty well against up and coming libraries. Performance enhancement has been made in the Ajax department too, where requests are now pooled and reused. Special thanks to David DeCarmine on this one!

Other fixes

[Chg] Inline events now gets triggered with triggerEvent()
[Fix] Multiple selector accuracy fixes in edge cases
[Fix] getStatus() and getStatusText() now works from within the Ajax callback function
[Fix] getStyle() for “float”, “width” and “height” now return correct values in IE
[Fix] Event handle threw error under rare circumstances in IE

Download

DOMAssistant 2.7.3 is drop-in replacement for the last version and is available for download now. We hope you enjoy this release. Feedback welcomed!

As its name DOMAssistant.Tabs suggests, it allows you to create a tab-based navigation system on your webpage with a simple call:

$$(‘myContainer’).doTabs();

Released under MIT license, the demo and download link are available on the official website.

Today, the PURE team announces official support for DOMAssistant. We are proud and at the same time happy to see DOMAssistant picking up momentum on real world usage.

 Do check out the PURE-DOMAssistant demo and give this nifty little library a try!