Element.querySelectorAll

A browser-native selector engine that allows you to select element nodes based on a CSS selector (for example: div p a).

var a = document.getElementById('a');

a.querySelectorAll('div.post > p a[class]');

Element.firstElementChild / Element.lastElementChild / Element.previousElementSibling / Element.nextElementSibling

Selects the first/last element child or the previous/next element sibling. Saves on extrenuous code like:

var previous = document.getElementById('example');
while((previous = previous.previousSibling) !== null && previous.nodeType !== 1) { }

var a = document.getElementById('a');

a.firstElementChild;
a.lastElementChild;
a.previousElementSibling;
a.nextElementSibling;

Element.children

Similar to the childNodes method, but without text nodes and comments.

var a = document.getElementById('a');

a.children;

Element.compareDocumentPosition

Allows you to compare one node’s position to another. Returns a bitmask.

var a = document.getElementById('a');
var b = document.getElementById('b');

a.compareDocumentPosition(b);

Element.contains

Returns a boolean whether or not an element is contained within another.

var a = document.getElementById('a');
var b = document.getElementById('b');

a.contains(b);

Unfortunately, it requires some additional code:

indexOf

Returns the first index where a value (searchStr) appears. startIndex allows you to begin the search at a predefined index.

Array.prototype.indexOf = Array.prototype.indexOf || function(searchStr, startIndex) {
	for(var i = startIndex || 0, thisLength = this.length; i < thisLength; i++) {
		if(searchStr === this[i]) {
			return i;
		}
	}

	return -1;
};

inArray

Returns either true or false if a value (searchStr) is in an array. startIndex allows you to begin the search at a predefined index.

Array.prototype.inArray = function(searchStr, startIndex) {
	return this.indexOf(searchStr, startIndex) > -1;
};

flatten

Flattens a multi-dimensional array to a one-dimensional array.

Array.prototype.flatten = function() {
	for(var i = 0, thisLength = this.length, b = []; i < thisLength; i++) {
		if(this[i].constructor === Array) {
			this[i] = this[i].flatten();

			for(var j = 0, thisILength = this[i].length; j < thisILength; j++) {
				b.push(this[i][j].constructor === Array ? this[i][j].flatten() : this[i][j]);
			}
		}
		else {
			b.push(this[i]);
		}
	}

	return b;
};

tidy

Tidies up an array by removing dupe values and flattening it to a one dimensional array.

Array.prototype.tidy = function() {
	var a = this.flatten();
	var b = [];

	for(var i = 0, aLength = a.length; i < aLength; i++) {
		if(!b.inArray(a[i])) {
			b.push(a[i]);
		}
	}

	return b;
};

All this code has been tested on the following browsers and works perfectly:

• Firefox 1.5, 2, 3, 3.5
• Chrome 1, 2, 3
• Opera 7, 8, 9.5, 9.64, 10
• Safari 3, 4
• Internet Explorer 6, 7, 8

Function.prototype.benchmark = function(iterations) {
	if(iterations === null || isNaN(iterations) || iterations < 1) { throw new TypeError(); }

	var begin = (new Date()).getTime();

	for(var i = 0; i < iterations; i++) {
		this();
	}

	var end = (new Date()).getTime();

	return (end - begin) / iterations; // in milliseconds
};

Use it like this:

var example = function() {
	// run some code
};

var benchmark = example.benchmark(100); // run example 100 times

In a nutshell, example is executed 100 times and benchmark contains the average time it took in milliseconds to execute it. Obviously more iterations gives a better average but could potentially crash if the number is too high. For big functions and libraries, I’d recommend starting off low (maybe 100) and then ramping it up but for small functions, you could easily start at up to 10,000 or maybe even 100,000. Make sure there isn’t any code in there that could potentially ruin the benchmarking — particularly alerts.

Remember to take into account slow machines and portable devices, as not every browser and computer will do it at the same speed.

var preloadImage = function(url, callback) {
	var image = new Image();
	image.src = url;
	image.onload = image.onabort = image.onerror = callback;
	return image;
};

Just specify the URL (url) and the callback function (callback) as so:

var callback = function(e) {
	alert(e.type);
};

var image = preloadImage('http://www.sidroberts.co.uk/image.gif', callback);

On the load event, the abort event or the error event, the callback function will be executed. You can distinguish these with the type property which is "load", "abort" and "error" respectively.

Now any image that points to that URL will load almost instantly.

RegExp.prototype.modifiers = function() {
	return /^\/(.+)\/([gim]+?)$/i.exec(this.toString())[2].split('');
};

Don’t say I didn’t warn you.

In short, that method converts the expression to a string and then executes another regular expression with it. This new regular expression takes away the main pattern and leaves the modifiers in a string. That string is then split into individual characters so you have an array of them (for example: ['g', 'i']).

This magic regular expression can also be used for extracting a pattern, which, in turn, allows you to rebuild it with the RegExp constructor — modifiers included. This is the method for extracting the pattern:

RegExp.prototype.pattern = function() {
	return /^\/(.+)\/([gim]+?)$/i.exec(this.toString())[1];
};

Rebuilding it is as simple as this:

var original = /\s+/g;

var pattern = original.pattern();
var modifiers = original.modifiers().join('');

var better = new RegExp(pattern, modifiers);

So, putting two and two together, if we can extract the pattern and the modifiers, and rebuild it, what’s stopping us from changing it along the way? Enter addModifiers and removeModifiers:

RegExp.prototype.addModifiers = function(modifiers) {
	return new RegExp(this.pattern(), this.modifiers().join('') + modifiers.join(''));
};

RegExp.prototype.removeModifiers = function(modifiers) {
	return new RegExp(this.pattern(), this.modifiers().join('').replace(new RegExp(modifiers.join('|'), 'i'), ''));
};

With the addModifiers method, you may have noticed that I haven’t bothered to check for the existing modifiers. This is because you can duplicate a modifier on a regular expression and it won’t matter as it’ll only be counted once. Both of these methods allow multiple modifiers and require them to be an array (['g', 'i']):

var original = /\s+/g;

original = original.addModifiers(['i']); // /\s+/gi
original = original.removeModifiers(['g']); // /\s+/i

pattern = original.pattern(); // '\s+'
modifiers = original.modifiers(); ['i']

Object.prototype.getElementsByAttribute = document.getElementsByAttribute = document.getElementsByAttribute || function(attribute, value) {
	switch(attribute) {
		case 'id':
			return [this.getElementById(value)];
		case 'tagName':
			return this.getElementsByTagName(value);
	}

	for(var i = 0, elements = this.getElementsByTagName('*'), elementsLength = elements.length, b = []; i < elementsLength; i++)
	{
		if(elements[i][attribute] == value)
		{
			b.push(elements[i]);
		}
	}

	return b;
};

First of all, if you can, optimise. That’s why there’s a switch statement that checks for "tagName" and "id" in the cases that you would want to use getElementsByTagName or getElementById. I made the getElementById return in an array so every result from getElementsByAttribute was an array but you may want to change this. If you have a getElementsByClassName function, you could also incorporate it into the switch statement.

Very simply, it runs through an array of all the child elements and adds it to an array if it matches the criteria. That array is then returned.

And because of how it is designed, you can call it with any DOM element:

document.getElementsByAttribute('title', 'Document Object Model');

var content = document.getElementById('content);
content.getElementsByAttribute('title', 'Document Object Model');

Take this as an example:

var getAcontent = function() {
	return document.getElementById('a').innerHTML;
};

var getBcontent = function() {
	return document.getElementById('b').innerHTML;
};

So ignoring that these IDs aren’t semantic, these two functions do exactly the same thing, just on different elements — defined as string variables. Why do you need two functions for this? What will you do when you need to get another element’s contents? By specifying the ID as an argument, you can get the contents of any element:

var getContent = function(id) {
	return document.getElementById(id).innerHTML;
};

This function is not only half the size of the other two functions but it also opens up much more capabilities. By making functions generic, you can keep them DRY.

Another tip is to look at your code and see if you have any strings hard-coded in your functions. Remove them and replace them with arguments, if possible. Some of them will have valid reasons for being there and to use the getContent function, a string will need to be hard-coded in most circumstances.

Object.prototype.getElementsByClassName = document.getElementsByClassName = document.getElementsByClassName || function(className) {
	className = className.replace(/\s+/g, ' ').replace(/^\s|![A-Za-z0-9-_\s]|\s$/g, '').split(' ');

	for (var i = 0, elements = this.getElementsByTagName('*'), elementsLength = elements.length, b = [], classNameLength = className.length, passed = true; i < elementsLength; i++, passed = true) {
		for (var j = 0; j < classNameLength && passed; j++) {
			passed = (new RegExp('(^|\\\s)' + className[j] + '(\\\s|$)', 'i')).test(elements[i].className);
		}

		if (passed) {
			b.push(elements[i]);
		}
	}

	return b;
};

document.getElementsByClassName works in the 30+ browsers that I’ve tested, apart from Internet Explorer 5.5 or below and Dillo 0.8.6. I’d change it but, to be honest, nobody uses Internet Explorer 5.5 or below anyway and Dillo hasn’t been updated in 2 years.

Something like document.getElementById('content').getElementsByClassName doesn’t work in all browsers, notably Internet Explorer 6 and 7 (see comment by Michael and comment by Sid).

I should also note that it follows the Mozilla spec to the letter — meaning that document.getElementsByClassName('classOne classTwo'); will return any element with class names of both classOne and classTwo. Of course, this function degrades rather nicely with newer browsers or where a getElementsByClassName function has already been defined so by following the spec, you should get on pretty fine.

Possibly the most easiest method is to use a JavaScript library but they can add notably to your bandwidth — especially if you’re just using it to shorten document.getElementById.

You could just map a short name to it:

var $ = document.getElementById;

var example = $('content');

Put simply, just use the $ function instead and it’ll work exactly the same.

Or if you want to make it easy to get several elements at once, try the modified Prototype $ method:

var $ = function() {
	for(var i = 0, argLength = arguments.length; i < argLength; i++)
	{
		arguments[i] = document.getElementById(arguments[i]);
	}

	return arguments;
};

var example = $('header', 'content', 'footer'); // Returns #header, #content and #footer in an array.

If you’ll be using the DOM a lot, though, it might be a good idea to write a small selector engine:

var $ = function(selector) {
	selector = selector.replace(/\s+/g, ' ').replace(/,\s?,|\s?,\s?/g, ',').replace(/^\s|\s$/g, '').split(',');
	var b = [];

	for(var i = 0, sLength = selector.length; i < sLength; i++)
	{
		var id = /^#([A-Za-z0-9-_]+)$/.exec(selector[i]);
		var tagName = /^([A-Za-z0-9-_]+)$/.exec(selector[i]);

		if(id)
		{
			selector[i] = [document.getElementById(id[1])];
		}
		else if(tagName)
		{
			selector[i] = document.getElementsByTagName(tagName[1]);
		}

		for (var j = 0, siLength = selector[i].length; j < siLength; j++)
		{
			b.push(selector[i][j]);
		}
	}

return b;
};

var example = $('#header, #content, #footer, span');

It’s not fantastic by any means but it’s a start and supports for IDs and tag names.

As a side note, Internet Explorer and Opera suffer from a getElementById bug so it may be wise to check this out before you fit all your projects with this.

Just A Few Examples

ColourJS('#FF0000').invert().toHex(); // #00FFFF
ColourJS('#FF0000').invert().toRGB(); // rgb(0, 255, 255)

ColourJS('rgb(255, 0, 0)').invert().toRGB(); // rgb(0, 255, 255)
ColourJS('rgb(100%, 0%, 20%)').invert().toRGB(); // rgb(0, 255, 204)

The syntax is still a little awkward and functions are minimal but for a first release, it works.

Licensed under GNU GPL v3.

Download ColourJS 1.0 here.

function is_int(variable)
{
	return variable.constructor === Number && Math.round(variable, 0) === variable;
}

Of course, is_integer() is just an alias so it’d be silly to not include it:

var is_integer = is_int;

end() advances array’s internal pointer to the last element, and returns its value.

End() is much more easier than the in_array() port or probably any PHP port because we’re just returning the last value:

function end(array)
{
	return array[array.length - 1];
}

function in_array(needle, haystack, strict)
{
	for(var i = 0, hLength = haystack.length, strict = !!strict; i < hLength; i++)
	{
		if((!strict && needle == haystack[i]) || (strict && needle === haystack[i]))
		{
			return true;
		}
	}

	return false;
}

It’s really simple and even converts strict to boolean if it isn’t already (strict = !!strict).