En Javascript, ¿puedes extender el DOM?

Question

En Javascript, puede extender las clases existentes mediante el uso de su objeto prototipo:

String.prototype.getFirstLetter = function() { 
    return this[0]; 
}; 

¿Es posible utilizar este método para extender los elementos DOM?

Answer 1

puede ampliar el DOM utilizando el prototipo del Elemento. Sin embargo, esto no funciona en IE7 y versiones anteriores. Necesitará extender el elemento específico, uno a la vez. La biblioteca Prototype hace esto. Recomiendo consultar el source para ver exactamente cómo se hace.

Answer 2

Encontré la respuesta justo cuando estaba escribiendo la pregunta, pero pensé en publicar de todos modos para compartir la información.

El objeto que necesita ampliar es Element.prototype.

Element.prototype.getMyId = function() { 
    return this.id; 
}; 

Answer 3

Sí, puede, pero se recomienda encarecidamente que no lo haga.

Si invalida algo que otra biblioteca espera ser el original u otra biblioteca sobrescribió algo que usted esperaba ... ¡caos!

Es una buena práctica mantener su código en su propio espacio de nombre/alcance.

Answer 4

No debería extender nada directamente (con "cualquier cosa" me refiero a objetos DOM nativos) - eso solo conducirá a cosas malas. Además de volver a extender cada elemento nuevo (algo que tendrías que hacer para soportar IE) agrega una sobrecarga adicional.

por qué no tomar el enfoque jQuery y crear un contenedor/constructor y se extienden que en lugar:

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

Entonces usted puede agregar sus propios métodos a través de myDOM.fn ... y se puede utilizar de esta manera:

myDOM(document.getElementsByTagName('*')).forEach(function(elem){ 
    myDOM(elem).addStyles({ 
     color: 'red', 
     backgroundColor : 'blue' 
    }); 
});