domExtending

domExtending.js

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'
    });
});

domExtending2.js

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';
    }
  });
});