A tiny utterly unfancy but cross-browser compatible DOM manipulation thing for a project that can't use anything bigger.

Useful for building small DOM chunks, tweaking CSS, adding stuff into the head element, and adding Click handlers. Surprisingly seems to cover 80% of all the stuff I ever do, though.

No CSS selector engine, but the methods are chainable. So that's nice.

$ component install charlottegore/dollar

var $ = require('dollar');

If you already have a reference to an element...

var dollarObject = $( element );

...otherwise use

var dollarObject = $();

dollarObject.create('div');

or

dollarObject.getById('someid');

that's the sort of epic level this is working on.

var anchor = $().create('a'); 

Create a new element.

$().getById('someid') 

Simple alias for element.getElementById()

dollarObject.text('show me the money');

This very handy method allows you to change the mystical text content of an element. This isn't a simple alias for 'innerText', you can't use it to create new elements from thin air, I'm afraid.

dollarObject.append( someOtherDollarObject );

Adds someOtherDollarObject as a child of dollarObject

dollarObject.appendTo( someOtherDollarObject );

Adds dollarObject as a child of someOtherDollarObject

dollarObject.onClick( function(e){ e.preventDefault(); console.log('clicked!'); } );

Binds a callback to be run when an element is clicked. e.preventDefault() works in IE here, thanks to some mickey mouse shimming.

Bind an event handler for a particular type of event

Unbind an event handler for a particular type of event.

dollarObject.attr('href', 'http://charlottegore.com');

set an attribute to a value.

dollarObject.css({ color : '#FFF', position: 'absolute'}});

In bizarre and unexpected contrast to .attr, this takes an object of keys/values representing css attributes and their values. And applies them. Thrilling stuff.

dollarObject.hide();

Guess. Go on! Guess!

dollarObject.show();

Does a remarkable rendition of 'Defying Gravity' from the Broadway musical 'Wicked'.

dollarObject.toggle();

Alternates between 'hidden' and 'shown' states.

dollarObject.addClass('shiny');

Adds a css class.

dollarObject.removeClass('shiny');

Removes a css class.

dollarObject.toggleClass('shiny');

Adds or removes a css class depending on the underlying quantum state.

dollarObject.hasClass('shiny') === true;

Tests to see if an object has a particular css class. I guess that's kinda useful.

$().getHead() 

Quick util to get the head element. This exists because creating script and style tags is sort of one of the main use-cases for this rubbish.

$().getBody();

Quick util to get the body element, because adding crap to the body is also another use-case.

MIT