Skip to content
Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


A little JavaScript frameworkVersion 0.1.3

Petit is a little JavaScript framework, built around the concept of using as few methods as possible to manipulate the DOM, while basing the implementation of those methods on their arguments.

Petit only has 10 methods.

For example, to get an attribute of an element, one could theoretically implement a method like this:

However, petit simply uses a .get() method, which can return any number of things, depending on the arguments passed to it:

var div = _('div'),
	foo = div.get('data-foo'),
	color = div.get('color');

This doesn't mean there's anything wrong with more specific methods, like .attr(). One can simply extend the library, as such:

(function() {

	_.fn.attr = function() {
		var len = arguments.length,
			attribute = arguments[0],

		if( len > 0 ) {
			if( len === 1 ) {
				return this[0].getAttribute(attribute);
			} else if( len === 2 ) {
				value = arguments[1];
				return this.each(function(el) {


div.attr('class') // ==> 'foo'

The most current stable source is in: src --> petit(.min).js

How to Use

A brief intro

Select an element:
By ID: _('#foo')
By class: _('.bar')
By name: _('@baz')
By tag: _('div')
With querySelectorAll: _('*.center > div#foo')

var div = _('div');



var div = _('div');

// select the element with index 0 relative to its matched set

// select all elements with an index greater than 0 relative to the matched set
div.filter(function(el) {
	return el.get('index') > 0;

// filter elements by selector
div.filter( _('.sidebar') );

Some getters/setters/checkers:

var div = _('div');

// get something from the first matched element in the set
div.get('text') // ==> 'Hello World!'
div.get('html') // ==> 'Hello World!<br>'
div.get('value') // ==> works on form elements, not divs
div.get('tag') // ==> DIV
div.get('index') // ==> 0
div.get('states') // ==> returns a 'states' object (see .set())
div.get('background-color') // ==> rgb(0,0,0)
div.get('style','background-color') // ==> rgb(0,0,0)
div.get('id') // ==> #firstDiv
div.get('attr','id') // ==> #firstDiv
// note: you can use camel-case (backgroundColor) or dashed properties (background-color)
div.get('state','open') // ==> true

// set things on all elements in the matched set
div.set('text','foo\nbar') // use \n for linebreaks
div.set('class','remove:foo') // remove a class
div.set('class','add:bar') // add a class
div.set('class','toggle:woah') // toggle a class
	style: {
		color: 'purple',
		fontSize: 20
	attr: {
		data-foo: 'bar'

// see if the first element in the matched set has something
div.has('children') // ==> 2
div.has('text') // ==> true
div.has( _('input') ) // ==> true
div.has('hello world!') // ==> true
div.has('hello world!<br>') // ==> true
div.has('attr','data-foo') // ==> true
div.has('html','hello world!<br>') // ==> true
div.has('text','hello world!') // ==> true
div.has('class','woah') // ==> true

// check the state of the first matched element in the set'open') // ==> true'awesome') // ==> also true

Helper method, .each():

var divColors = [];

div.each(function(element,index) {
	colors.push( element.get('color') );
	console.log(index) // ==> 0, 1, 2, etc.

Attach or remove an event handler:

div.on('click', function(e) { console.log( });
// e is passed in as window.event (for IE6-8) or as an event object in all other browsers

// delegate events for dynamic content
div.on('click', 'input', function() { console.log(true) });

// note: you can add multiple event handlers to DOM elements'click');

States explained:
The idea behind the states object is to be able to assign human-readable states to an object. Say we have a panel, and we want to toggle the panel's visibility. Instead of checking if( panel.get('display') === none ), we can first instead set the state of the panel based on whether it's open or closed:


// then later...
if('open') ) {
	// close the panel

Browser Compatibility

Only recommended for production use in IE9 and up and all other current versions of widely-used browsers

  • Tested and functional in latest versions of Chrome, FireFox, Opera, Safari, and Internet Explorer (desktop versions)
  • Tested and functional in latest version of FireFox and Opera (mobile versions)
  • Buggy in IE8 and below


0.1.3 — Current stable version

31 March 2014

  • Selector engine updated for correct IE8 'getElementsByClassName' polyfill (previous version was non-functional)
  • .has() method updated - now correctly returns a numerical value when a Petit object is passed in as the sole argument


29 March 2014

  • Better support for IE, including IE8 and below (however, only recommeded for production use in IE9+ and all other major browsers)
  • .get() method revised to prevent unwanted behavior


25 March 2014

  • Better IE8 compatibility in selector engine (using document.getElementsByTagName polyfill)
  • .children() method, which retrieves all children, grand-children, etc.


  • No support to detach anonymous event handlers from elements (however, one can remove named handlers since .on() and .off() uses addEventListener (or attachEvent for IE<9)
  • Would like to be able to link states and events together, potentially using the publish/subscribe pattern
  • Need more traversal methods (.parent[s](), .sibling[s]())
  • Does not support any sort of animation methods
  • Selector engine is minimal and requires the use of querySelectorAll for CSS-style selectors
  • .get(cssproperty) does not normalize vendor prefixes or opacity
  • Event delegation utilizing the .on() method does not work on dynamically created elements

License under The MIT License - © 2014, Joshua Beam


argument-based javascript framework




No packages published