Pasar al contenido principal
Alexys Lozada
José Luján
Manuel Rodriguez
José Luján
Luis Avilés
Álvaro Felipe
José Luján
Beto Quiroga
Jonathan MirCha
Jonathan MirCha
Álvaro Felipe
Alexys Lozada, Álvaro Felipe, Jonathan MirCha
Beto Quiroga
Alexys Lozada
Alexys Lozada
José Luján
Álvaro Felipe
Álvaro Felipe
Jonathan MirCha
Jonathan MirCha
Alexys Lozada, José Luján
Alexys Lozada, José Luján
Alexys Lozada, José Luján
Camilo Adobe
Álvaro Felipe
José Luján
Jonathan MirCha
Álvaro Felipe
Álvaro Felipe
Beto Quiroga, Alexys Lozada
Álvaro Felipe
Juan Villalvazo
Luis Avilés
Jonathan MirCha
Jonathan MirCha
Jonathan MirCha

Crea tus métodos abreviados para el DOM con JavaScript

Si extrañas jQuery para seleccionar elementos del DOM porque en Vanilla JS debes escribir mucho, puedes crear tus propios métodos abreviados con la siguiente técnica.

Crea tus métodos abreviados para el DOM con JavaScript

Cuando queremos obtener elementos del DOM tenemos tres métodos principales de document (en realidad hay más pero estos son los más usados):

// obtiene un elemento cuyo id coincida con el parámetro
document.getElementById()
// obtiene el primer elemento cuyo selector CSS coincida con el parámetro
document.querySelector()
// obtiene todos los elementos cuyo selector CSS coincida con el parámetro
document.querySelectorAll()

Sin embargo, son muy verbosos y suele ser aburrido escribir tanto y terminamos extrañando como seleccionábamos elementos con jQuery $(). Así que te enseñaré a crear tus propios métodos abreviados.

Guardar estos métodos en variables

Lo primero que podemos pensar es que sí podemos hacer lo siguiente:

const log = console.log
log(value)  // es lo mismo que console.log(value)

También lo podríamos hacer para el DOM:

const id = document.getElementById
const q = document.querySelector
const all = document.querySelectorAll

Y luego usar nuestras nuevas funciones:

const menu = id('main-menu')
const title = q('#title')
const links = all('.menu__link')

Sin embargo, tendremos malas noticias en consola:

illegal invocation javascript - Blog de EDteam

Usar .bind() para definir el scope

Lo anterior se debe a un error en el scope, puesto que para obtener elementos del DOM el scope debe ser document pero lo hemos cambiado a window La forma para solucionarlo es ejecutar las funciones con bind para definir el scope.

const id = document.getElementById.bind(document)
const q = document.querySelector.bind(document)
const all = document.querySelectorAll.bind(document)

Ahora ya puedes usar tus métodos abreviados en tus proyectos.

const button = id('button')

Si quieres dominar JavaScript, el lenguaje más importante de la web tenemos una completa especialidad. El primer curso es gratis: https://ed.team/especialidades/javascript

Suscríbete al blog de EDteam

Ingresa tu correo electrónico para recibir nuestro boletín semanal