DOMAssistant 2.5 released – CSS selector support, new AJAX methods and more goodies added!

After listening to a number of JavaScript developers, seeing how they work in real life and analyzing their needs, I’m happy to provide the heavily updated DOMAssistant 2.5!

What’s new?

First, DOMAssistant is almost completely re-written, to focus on performance, ease-of-use and the most useful features, while trying keep the file size as small as possible. The new major features are:

CSS selector support

Using CSS selectors have almost become a de facto standard in the major JavaScript libraries. Previously I’ve been a bit hesitant to introduce them, but since everybody loves them and think they are great to use, I have added support for them. And, to be honest, they are a fantastic and easy approach to select element(s), so I’m glad I did!

DOMAssistant supports CSS 1, CSS 2 and CSS 3 selectors to get a reference to the specific elements you want, with just a short CSS statement away. And, as opposed to other JavaScript libraries, the syntax for the CSS selectors are exactly the same as specified by W3C. Therefore, you don’t have to learn anything extra to use CSS selectors with DOMAssistant, just use the technology you’ve already adapted.

Read the complete list of the different CSS selectors you can now use for more information.

New AJAX methods: load and get

Previously, the only way to make an AJAX call was like this: DOMAssistant.AJAX.get(url, functionToCall). Looking at how most people use AJAX call, and also the need to be in an element’s context with the returned content, I’ve added one new method, and tweaked the existing get method. Now, they can both be used directly on an element.

The load method

The load method will go to the provided URL and then automatically load the returned content into that element. Like this:


It also provides a second, optional, parameter if the returned content should be appended to the element’s already existing content. This defaults to false, i.e. replace the existing content, if not specified:

$("directions").load("maps.php", true);

The get method

The get method works like before, where you call it on the AJAX object and then call a function with the returned content. What’s new, though, is that you can also call it directly on an element, and the function called will be within the context of the element that called. Let me show you:

$("news").get("news.php", insertNews);

function insertNews (returnedAJAXContent) {
// The keyword this in this function is the element with an id of "news"

Helper methods

There are also a few helper methods to make it easy to track the state of any current requests. These are:

Returns the readyState of the current AJAX request.
Returns the status code of the current AJAX request.
Returns the status text accompanying the status code of the current AJAX request.

The elmsByTag method

This method does just what it says: it selects element’s by their tag name. This code would select all the a elements which are children to the navigation element:


The each method

A feature which has been long requested is to have an each method to easily iterate over all elements returned from an element selection. They way it works is that you call a function for each item in the collection:

$("#navigation a").each(function () {
// Do some JavaScript magic

What has changed?

DOMAssistant 2.5 is supposed to be completely backwards compatible. That means that if you don’t want to use CSS selectors, or you have written a lot of code that’s dependent on the previous version, it should work just fine. The nice part about this is that if you like CSS selectors, go crazy with them; if you prefer a more method-based approach for each selection, that will work too. These two code samples do the exact same thing:

$("#contact-form input[type=text]");

$("contact-form").elmsByAttr("type", "text", "input");

Note that if you want to reference an element without the CSS selector approach, its id should not be preceded by a # mark. If you have it there, it will be regarded as a CSS selector. A little tweak of this is that if you only send in one value containing just text to the $ method, it regards it as an element id, and not as a CSS selector. This means that this code will only look for an element with that id, and not elements by that tag name:


Frankly, it’s a design decision by me that it’s usually unlikely that you want, for example, all the div elements in a web page (from a design perspective, very useful; but not as much from a scripting one). Therefore, if you still were to desire all elements of a certain element type within the document, you have these two options:

$("body div");


Another difference is that a CSS selector approach will always return an array of elements, and if there’s no match, it will return an empty array. This mean that chaining etc will fail silently if there’s no match, instead of throwing an error. However, if you do refer to just one element with its id, it will return null if there’s no match. This means that you can use different strategies depending on what you want to use it for. Take a look at these two ways to refer to an element, and what they return if it isn’t found:

// Returns null
var elm = $("container");
if (elm) // Return false

// Returns an empty array
var elm = $("#container");
if (elm) // returns true

Contrary to these examples, though, I strongly encourage you to use typeof, checking length etc to really make sure something exists and is what you expect it to be, before you try to do any operations on it.

Code quality and performance

I’ve worked very hard to write as good and consistent code as possible. DOMAssistant now creates its own scope to make use of private properties, and the modules now have the same disposition and structure as the core module. The whole library is JSLint validated, to make sure the code is top-notch and to avoid any runtime errors one might encounter (except for a conditional comment workaround in the Load module to cater to Internet Explorer specific needs).

It also introduces a namespacing model, where DOMAssistant is the main object and each module is an extended object related to the core one (DOMAssistant.CSS, DOMAssistant.Events etc). But don’t worry whether this will make your life harder; the syntax for the end user is easier than ever, and this is just to ensure code quality behind the scenes. Ease of use and good object structure should not collide with each other.


Something I find important is to avoid memory leaks in Internet Explorer, for those occurrences when it fails to clean its garbage collection. IE is a very fragile web browser, and it needs to be treated with care. My measure has therefore been to test DOMAssistant together with Drip to make sure no performance is lost, together with making assertions to clean up the code when using innerHTML features to replace already existing code in the document (described more in JScript Memory Leaks).

Another inspiration has been Dan Webb’s metaprogramming JavaScript, which has inspired me to write self-learning code that will be even faster and smoother to execute!

Utilizing XPath

Most major web browsers, but Internet Explorer, has support for XPath. XPath is a great way to reference elements, and with its native support in web browsers, the speed and cost of performing operations outmatches anything by a regular script. The Opera web browser, unfortunately, has some minor problems in its XPath implementation, so for now it defaults to using the script-based version which IE is using too (these bugs will be reported to Opera in the near future).

My take on JavaScript libraries

The way I see JavaScript libraries is that they should be there for you like a tool belt. At one time or another during they day, you will have a need for each respective tool and it will be there to make your life easier. Most JavaScript libraries out there, though, seem to be more like a storage room: let’s fill it with useful things that you might need one day, perhaps.

That’s not for me. DOMAssistant is completely modular, and all modules together consist of core functionality that I believe everyone needs in their daily JavaScript work:

  • Element selection (through CSS selectors or enhanced methods).
  • CSS handling (adding and removing CSS classes).
  • Event handling (adding and removing events).
  • Content manipulation (add or remove elements).
  • AJAX interaction (getting content from other sources, and adding it to the document).
  • DOM loaded (calling functions when the DOM is loaded, as opposed to the document with all dependencies).

It should be noted that DOMAssistant does in no way alter your CSS through some hidden-away inline styling deep in its core. On the contrary, DOMAssistant wants you to have all your styling in separate CSS files, and use the addClass and removeClass to change the styling of an element. Total separation between presentation and interaction, just the way it should be.

Getting serious

With this release of DOMAssistant, I feel that it can seriously compete with the major JavaScript libraries on the market. It has a very easy syntax to select or manipulate elements, and with the core functionality anyone needs, without having to worry about web browser differences, the compressed version with all modules included weighs in at a mere 6kb (Gzipped). If Gzipping isn’t an option for you, the compressed version lands at 21kb.

Bug reporting

From now on, DOMAssistant is hosted by Google code, and with that comes a simple way to report any issue you might encounter, for me to take a look at and quickly fix as soon as possible. It also makes any problems visible to the public, so you can see if it is already being worked on, and at the same time offers all the available downloads for DOMAssistant in one simple interface, where you can go back to a previous release, if you were to encounter any temporary problem with the last released one.

Help me help you!

Please download a copy of DOMAssistant. Play around with it, kick its tires, corner it and try to take its lunch money. See how it reacts to your needs, learn to love the consistent syntax, and, most of all: let it do the dirty work for you so you can focus on the fun parts!

Let me know what you think, and don’t hesitate to contact me if you have any questions! Happy JavaScripting!



Thanks to everyone inspiring me and helping me! Extra thanks go out to:

Posted in Developing,DOMAssistant,JavaScript,Technology |

Leave a Reply

Your email address will not be published. Required fields are marked *