Building a JavaScript Library Part 2: Element IDs feature image Photo Credit: Wikivisual

Contents

In Part 1: DOM Selecting of the series we set our overall requirements and goals. With our goals of minimalism and performance in mind we need to set the requirements for the this phase:

“Before software can be reusable it first has to be usable.” - Ralph Johnson (computer scientist)

Notice: The intended purpose of the library is as a teaching tool, it is not intended to be used in a production environmental this time (or maybe ever). You’ve been warned!!

Element id C.R.U.D.

An elements id is stored at the id property of an element. Since properties can be directly set and changed we don’t need to add any convenience functions for them. We would just use the vanilla javascript property like this:

var $elements = select("body");  //See the select function we wrote last time.

console.log("elements[0].id");  // Writes "";

$element[0].id = "foo";		
console.log("elements[0.id");  // Writes "Foo";

$element[0].id = "bar";
console.log("elements[0.id");  // Writes "bar";

Removing an Id

Removing an id from an elements might justify a special function, if for nothing else but consistency.
We could simply set the id to an empty string like $element.id ="", but the element would still have an id attribute which could lead to come confusion later on. So lets write a function that removes the id attribute from all elements passed to it.

In the first article we decided to that we wanted to follow a design pattern that would work for both synchronous and asynchronous programming. All of our methods going to following a similar pattern: functionName(targetElements, all other parameters… , callback).

We’ll need to start the function off with a fast way to check if the callback was passed.
After doing a bit of benchmarking http://jsperf.com/checking-a-callback I found that using an empty anomous function as a fallback is the fastest way to use the callback only if defined. So our base function should look like:

function removeId(elements, callback) {
	var _callback = callback || function (element, error){};  
}

Where the elements is a html element or and array of html elements and callback is our callback function. Since we could have either, we need to check if we have an array or a single element.
The html element object does not contain a length property, while arrays and element lists do.
If it is an array, then we will loop through the array and remove all of the ids.

function removeId(elements, callback) {
	var _callback = callback || function (element, error){};
	
	if ('length' in elements) {
		//Is an array of elements
		if (elements.hasOwnProperty(key)) {
			/****Remove element id here****/
		}
	} else {
		//is a single element
		/****Remove element id here****/

	}
}

Lastly, we need to actually remove the elements’ ids. As I said above we could just set the id to an empty string and that would work for most cases, but I prefer to remove the attribute completely with the element.removeAttribute('id') method. There is very little performance difference and it is a little safer for attribute checking. Then we need to call our callback function after the removal[s]. Our final function would look like:

function removeId(elements, callback) {
	var _callback = callback || function (element, error){};
	
	if ('length' in elements) {
		for (var key in elements) {
			if (elements.hasOwnProperty(key)) {
				elements[key].removeAttribute('id');
				_callback(elements[key]);
			}
		}
	} else {
		elements.removeAttribute('id');
		_callback(elements);
	}
}

Dealing with element ids in javascript are pretty easy. Setting and changing and element’s id is as simple as setting a property, and we have created an easy method for removing an id. The thing to remember is that there should only be one element in a page per id. Though CSS can handle multiple elments with the same id, JavaScript doesn’t handle it consistantly between browsers.

In the next article in the series we will cover manipulating element classes. Until then keep hacking.


comments powered by Disqus