html, body {
  height: 100%;
  min-height: 1005;
}

*, *:before, *:after {
  box-sizing: border-box;
}

.me {
  width: 200px;
  height: 20px;
  background: red;
  margin: 10px;
}

span.autre {
  margin-left: 10px;
  padding: 5px;
}

// Notre Bibliothèque DOM
;(function(){
  
  "use strict";

  /* DOM */
  // On définit notre wrapper, qu'on va appeler DOM. C'est notre Constructor.
  // Il reçoit el (un ou plusieur éléments DOM) comme paramètre
  // on définit la propriété elements qui génère un tableau contenant les éléments
  // du DOM
  function DOM(el) {
    this.elements = el.length ? Array.prototype.slice.call(el) : [el];
  }

  // On étend notre Wrapper pour contenir les méthodes suivantes:
  DOM.prototype = {
    // La méthode scale fait un zoom d'un certain élément en ayant un 
    //facteur de zoom comme paramètre
    scale: function (factor) {
      this.elements.map(function(element, index) {
        element.style.height = factor * parseInt(window.getComputedStyle(element).height, 10) + 'px';
        element.style.width = factor * parseInt(window.getComputedStyle(element).width, 10) + 'px';
      });
      return this; // Ceci est important pour l'enchainement des méthodes 
                  // (on veut par exemple El.method1(..).methode2(..) etc...)
    },
    
    // La méthode css définit le style d'un élément tout comme jQuery. 
    // Dans ce cas le paramètre style est un object de propriétés CSS
    css: function (styles) {
      this.elements.map(function(element, index) {
        for (var prop in styles) {
          if (styles.hasOwnProperty(prop)) {
            element.style[prop] = styles[prop];
          }
        }
      });
      return this;
    },
    
    // La méthode changeBGColor change la couleur de fond d'un élément du DOM.
    // paramètre: la nouvelle couleur
    changeBGColor: function (color) {
      this.elements.map(function(element, index) {
        element.style.backgroundColor = color;
      });
      return this;
    },

    // Cette Méthode est une simplificaion de addEventListener, 
    // qui a pour but d'ajouter des évènements aux éléments du DOM
    on: function (eventName, callback) {
      this.elements.map(function(element, index) {
        element.addEventListener(eventName, function (evt) {
          if (typeof callback === 'function') { callback(evt)}
        }, false);
      });
    }
  }
  /* EO:DOM */
  // On définit une instance de notre Wrapper DOM. Comme ça on pourrait 
  // utiliser notre petite Biliothèque d'une façon trés simple:
  // directement: dom(ELEMENT(S) DU DOM)
  window.dom = function (element) {
    return new DOM(element);
  }

  // on retourne notre wrapper au cas où l'utilisateur veut 
  // utiliser cette bibliothèque comme suit: var $D = new DOM(ELEMENT(S) DU DOM);
  return DOM;

}());