aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

¿Cuantas veces hemos teniedo la necesidad de extender las propiedades de nuestro elemenos HTML? ¿La vida no sería más cómoda si el elemento <input  /> tuviera un método, validaPass()? o ¿el elemento <div /> un contains()?

Podemos recurrir a frameworks (MooTools, Prototype, jQuery,…) para conseguir estas funcionalidades. Para navegadores modernos y estandares, el uso de prototype podría ahorrarnos muchos problemas, pero IE6 … está ahi y no podemos olvidarlos, una solución para este tipo de incompatibilidades sería algo asi.

var DOMElement =
{
	extend: function(name,fn)
	{
		if(!document.all)
			eval("HTMLElement.prototype." + name + " = fn");
		else
		{
			//
			//	IE doesn't allow access to HTMLElement
			//	so we need to override
			//	*document.createElement
			//	*document.getElementById
			//	*document.getElementsByTagName
			//

			//take a copy of
			//document.createElement
			var _createElement = document.createElement;

			//override document.createElement
			document.createElement = function(tag)
			{
				var _elem = _createElement(tag);
				eval("_elem." + name + " = fn");
				return _elem;
			}

			//take copy of
			//document.getElementById
			var _getElementById = document.getElementById;

			//override document.getElementById
			document.getElementById = function(id)
			{
				var _elem = _getElementById(id);
				eval("_elem." + name + " = fn");
				return _elem;
			}

			//take copy of
			//document.getElementsByTagName
			var _getElementsByTagName = document.getElementsByTagName;

			//override document.getElementsByTagName
			document.getElementsByTagName = function(tag)
			{
				var _arr = _getElementsByTagName(tag);
				for(var _elem=0;_elem<_arr.length;_elem++)
					eval("_arr[_elem]." + name + " = fn");
				return _arr;
			}
		}
	}
};

Este código nos permite extender todos los elementos que existan dentro del arbol DOM. Lo que nos permite añadir funcionalidades extras a cada uno de ellos.

// Nos añade a todos los elementos del DOM el método myID() que nos mostrará el ID del elemento.
DOMElement.extend("myID",function(){if(this.id) alert(this.id)});