DOMAss – The DOM assistant

Updated March 2nd 2007

DOMAss now has a new name, DOMAssistant, and it is also possible to run it side-by-side with other JavaScript libraries such as Prototype and jQuery. For more information, please read: DOMAss renamed to DOMAssistant, with added Prototype/jQuery compatibility.

Updated March 6th 2007

Per Zimmerman made me aware of the fact that I wasn’t as consistent when checking for names and whitespace in the addClass and removeClass as I am in the hasClass method, so this has been fixed to address any potential issues you might have had. Just download the DOMAssistantCSS JavaScript file and you should be good to go. :-)

Updated April 11th 2007

Changed the license to a Creative Commons Deed.

Updated May 11th 2007

Minor fix for strange behavior in IE when using the addEvent method on the window object. For more information, please see DOMAssistant fix for addEvent method peculiarity in IE.

Updated July 11th 2007

PDF documentation added, kindly created by Michael Frühmann.

Updated September 20th 2007

DOMAssistant 2.0 released!

Updated October 4th 2007

The DOMAssistantCompressed JavaScript file has been updated. My compression approach was a little too effective for the special DOMReady fix for Internet Explorer, so necessary code for optimal performance was unfortunately removed. This has now been addressed, so please download the new version if you use the compressed file.

Updated October 19th 2007

The DOMAssistantCompressed JavaScript file is updated again. I noticed a problem with the elmsByAttribute method in IE where the compression resulted in a wrong reference, returning incorrect results. Download the new version and it will be fine.

When I released my EJ code, while I felt that it contained very useful functions, it didn’t feel properly packaged. Also, I’ve always wanted a proper base to stand on for various DOM interaction, so I didn’t have to start from scratch in every project.

So now, I proudly present DOMAss!

DOMAss is short for DOM Assistant, and the idea is to provide a simpler and more consistent way to script against the Document Object Model (DOM) in web browsers. I’ve always felt that the different ways of accessing elements in the DOM and interact with it isn’t always the most logical or practical way, not to mention web browser differences. Being modular and lightweight has also been two very strong demands I’ve had on the library, so to make sure you only use as little code as possible, as opposed to including large libraries where you, in the end, only use 10% of what’s included.

The idea with DOMAss is that everything starts with a desired element, and then performs various methods on it, such as adding/removing classes, finding elements with a certain className, applying events to it, etc. Basically, you always select an element using the $ method, and then you will perform actions using customized methods applied to it.

Example code

// Get a direct reference to a DOM element

// Get element's child elements with the class of "mandatory"

/* Get element's child elements with a "type" attribute
   that has the value "text"
$("id-of-element").getElementsByAttribute("type", "text");

// Adds the class "selected" to the element

// Add a onclick event to the element
$("id-of-element").addEvent("click", functionToCall);

It’s modular!

The strength with DOMAss is that it is completely modular, in that sense that it is only dependent on one single core JavaScript file, DOMAss.js. That file is only 2.8 kb, and all other modules are optional. Then you can choose to only use the ones you find necessary in your application, and you can easily add your own modules taking advantage of the solid base DOMAss offers. The reasoning behind this is to make the file size usage as small as possible, while at the same time addressing any potential bandwidth issues. The parole is:

Include only what you use.

Different modules are available for various purposes

DOMAss (2.8 kb)
The core module for all DOMAss functionality. This one is required, but all other modules are entirely optional.
DOMAssContent (2.2 kb)
Offers way to create elements, add, remove and replace content in elements.
DOMAssCSS (1.6 kb)
Consists functionality for adding/removing classes from an element, checking if an element has a certain class and to check what rendered style an element has.
DOMAssEvents (1.7 kb)
Offering ways to handle events cross-browser, with the ability of seamlessly adding multiple events to the same element. It also consists of methods to remove added events, preventing default event actions and cancelling the bubbling of events.
DOMAssLoad (1.8 kb)
Gives you a way to call whatever function/-s you want as soon as the DOM has loaded, without the need of waiting for images, flash movies and other external files to load.


Certain people and their scripts has inspired me in the creation of DOMAss, so I thought it would be fair to acknowledge them for the inspiration they’ve given me:


PS. I just have to tell you what my friend Henrik though I should name this post: “The only Ass you’ll ever need”. :-) DS.

Posted in Developing,DOMAssistant,JavaScript,Technology |

Leave a Reply

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