¿Cómo agregar mis propios métodos al objeto HTMLElement?

1 minuto de lectura

por ejemplo para this.parentNode me gustaria solo escribir this.p o en lugar de
document.getElementById('someid') solo escribe document.g('someid'). Por supuesto que son ejemplos simples, solo quiero saber cuál es la forma correcta de hacerlo.

(Sé que puedo usar jQuery o Prototype, pero me gustaría aprender cómo se hace realmente en JS)

¿Como agregar mis propios metodos al objeto HTMLElement
scunliffe

Aunque tú poder prototipo en el HTMLElement en muchos navegadores – Internet Explorer (6,7,8) es NO uno de ellos. AFAIK, IE9 admite esto (aunque no lo he probado).

Para los navegadores que lo manejan, puede hacer:

HTMLElement.prototype.doHello = function(thing){
  console.log(this + ' says: ' + thing)
}

document.body.doHello('hello')

  • @Flash Thunder: indiqué que en la respuesta … IE6,7,8 definitivamente estaban fuera de la mesa de ‘soporte’.

    – scunliffe

    21 nov.

  • sí, pero puedes simplemente usar Object en vez de HTMLElement

    – Trueno relámpago

    21 nov.

  • Pero el OP quería vincular métodos en los elementos HTML en sí mismos: usar un objeto externo anularía ese propósito … momento en el que sería mejor algo como jQuery (ya que han resuelto esto y mucho más)

    – scunliffe

    21 nov.

  • Pero con HTMLElement.prototype.… no puedes tener un elemento objetivo con this de self (como cuando por ejemplo String.prototype.…) 🙁

    – iiic

    23 ago. 18 en 11:48

1642888926 166 ¿Como agregar mis propios metodos al objeto HTMLElement
Tim abajo

Recomiendo encarecidamente no intentar hacer esto, por algunas razones:

  • Compatibilidad del navegador. Si bien es posible en varios navegadores, no es posible en IE <= 8.
  • Los elementos DOM son objetos host. Los objetos host (es decir, los proporcionados por el entorno que no son objetos nativos de JavaScript) no tienen la obligación de seguir las mismas reglas que los objetos nativos de JavaScript y, aparte del comportamiento DOM especificado, pueden hacer lo que quieran. Por lo tanto, incluso si algunos navegadores proporcionan una HTMLElement prototipo y permitirle aumentarlo, no hay garantía de que funcione como espera.
  • Compatibilidad con otro código en su página. Si cualquier otro código en su página (como Prototype) interfiere con el HTMLElement prototipo, corre el riesgo de colisiones de nombres y errores difíciles de detectar.

En su lugar, sugeriría crear objetos envolventes alrededor de los nodos DOM como lo hacen jQuery, YUI y otras bibliotecas.

Kangax ha escrito un buen artículo sobre extensibilidad DOM, cubriendo todos estos puntos y más.

  • ¿Estás seguro de jQuery? Según tengo entendido, jQuery está extendiendo elementos DOM y otros elementos cuando .data() se usa – github.com/jquery/jquery/blob/master/src/data/Data.js

    – JojOatXGME

    30 mar. 17 a las 12:48

  • @JojOatXGME: Sí, en el caso específico de data(), jQuery almacena una propiedad “expansión” (pero no un método) en el elemento DOM. Sospecho que también puede usar expandos para rastrear oyentes de eventos y posiblemente otras cosas. Sin embargo, el punto general se mantiene: la API de jQuery proporciona una funcionalidad DOM extendida a través de objetos de contenedor en lugar de extender el DOM en sí. La extensión que le hace al DOM se usa solo internamente.

    – Tim Abajo

    31 mar. 17 a las 15:07


En una palabra, no. es mejor no modificar objetos que no son de su propiedad.

Esto es particularmente cierto para HTMLElement, que no puede modificar en algunos navegadores.

.

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad