domExtending
var bindEvent = function( element, type, eventHandler ) {
if ( element.addEventListener ) {
element.addEventListener( type, eventHandler, false );
} else if ( element.attachEvent ) {
element.attachEvent( "on" + type, eventHandler );
}
};
var monDOM = (function(){
var monDOM = function(elems){
if (elems === null)
throw new Error('Aucun élément sélectionné');
return new MonConstructeurDOM(elems);
},
MonConstructeurDOM = function(elems) {
this.collection = elems.length > 1 ? Array.prototype.slice.call(elems) : [elems];
return this;
};
// Placer les fonctions ici pour étendre le DOM
monDOM.fn = MonConstructeurDOM.prototype = {
forEach : function(callback) {
var elems = this.collection;
for (var i = 0, l = elems.length; i < l; i++) {
callback( elems[i] );
}
return this;
}
};
return monDOM;
})()
monDOM(document.getElementsByTagName('input')).forEach(function(elem){
// code de la fonction ici
bindEvent(elem, 'focus', function () {
console.log('sélectionner votre mail');
});
bindEvent(elem, 'blur', function () {
if (elem.value === '') { // ou regEx
console.log('Le champ est toujours vide ou pas au bon format !');
elem.style.backgroundColor = '#f00';
} else {
elem.style.backgroundColor = '#fff';
}
});
});
var myDOM = (function(){
var myDOM = function(elems){
return new MyDOMConstruct(elems);
}, MyDOMConstruct = function(elems) {
this.collection = elems[1] ? Array.prototype.slice.call(elems) : [elems];
return this;
};
myDOM.fn = MyDOMConstruct.prototype = {
forEach : function(fn) {
var elems = this.collection;
for (var i = 0, l = elems.length; i < l; i++) {
fn( elems[i], i );
}
return this;
},
addStyles : function(styles) {
var elems = this.collection;
for (var i = 0, l = elems.length; i < l; i++) {
for (var prop in styles) {
elems[i].style[prop] = styles[prop];
}
}
return this;
}
};
return myDOM;
})();
// use :
myDOM(document.getElementsByTagName('*')).forEach(function(elem){
myDOM(elem).addStyles({
color: 'red',
backgroundColor : 'blue'
});
});