Uno puede crear una abreviatura para document.querySelector con
const $ = document.querySelector.bind(document); const $$ = document.querySelectorAll.bind(document); así que ahora let a = $('a') y let a = document.querySelector('a') sean equivalentes.
¿Hay alguna manera de crear una abreviatura para el método querySelector en sí?
Es decir, hacer let a = element.shortHand(args) y let a = element.querySelector(args) para que sea equivalente a cualquier element (desconocido de antemano).
Editar: dado que las personas dicen que hacer lo anterior es una mala idea, hay otra pregunta: ¿Cómo hacer selectores $ $$ como el de Chrome DevTools , que acepta el elemento raíz como segundo parámetro?
Es decir, para hacer let a = $('a',element) y let a = element.querySelector('a') para ser equivalente.
Aquí hay algunas opciones:
Element.prototype.shortHand = Element.prototype.querySelector Este "monkey-parchea" la clase Element en el propio DOM y agrega esta función en todos los elementos en DOM, que es solo una copia de la función querySelector .
Esto está muy desanimado. Es malo para el rendimiento y es malo en caso de que los navegadores decidan agregar más funciones en el futuro que entren en conflicto con su función. Pero si solo está jugando y no está enviando este código, debería estar bien.
Si está buscando crear su propio mini jQuery, también puede hacer algo como esto:
class MiniJQuery { constructor(el) { this.el = el; } shortHand(...query) { return this.el.querySelector(...query); } // ... put any other functions you want to use } const $ = (queryOrElement) => { if (typeof queryOrElement === 'string') { return document.querySelector(queryOrElement); } return new MiniJQuery(queryOrElement); } // Now you can: const a = $(element).shortHand(args); // which is equivalent to const a = element.querySelector(args);Este es un enfoque mucho más seguro y no problemático. No creo que esto agregue mucho valor, ya que puede escribir el nombre del método un poco más largo, pero podría agregar métodos más interesantes en su clase para que valga la pena.
Muy similar al enfoque anterior, pero puede usar un Proxy en lugar de la clase MinijQuery para "reenviar" métodos desconocidos al elemento en sí. Esto significa que $(element) tendrá todos los métodos que tiene el propio element .
Ejemplo:
const handler = { get: function (target, prop, receiver) { if (prop === "shortHand") { return target.querySelector.bind(target); } const retVal = Reflect.get(...arguments); // Bind methods to the element. return typeof retVal === 'function' ? retVal.bind(target) : retVal; }, }; const $ = (queryOrElement) => { if (typeof queryOrElement === 'string') { return document.querySelector(queryOrElement); } // You can add all sorts of custom function handlers here. return new Proxy(queryOrElement, handler); } $('div') // gets divs $(element).shortHand(...) // works the same as element.querySelector // But the HTMLElement methods still work too: $(element).querySelector $(element).querySelectorAll $(element).className // ...Lea más aquí: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy