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):
1// obtiene un elemento cuyo id coincida con el parámetro 2document.getElementById() 3// obtiene el primer elemento cuyo selector CSS coincida con el parámetro 4document.querySelector() 5// obtiene todos los elementos cuyo selector CSS coincida con el parámetro 6document.querySelectorAll() 7
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:
1const log = console.log 2log(value) // es lo mismo que console.log(value) 3
También lo podríamos hacer para el DOM:
1const id = document.getElementById 2const q = document.querySelector 3const all = document.querySelectorAll 4
Y luego usar nuestras nuevas funciones:
1const menu = id('main-menu') 2const title = q('#title') 3const links = all('.menu__link') 4
Sin embargo, tendremos malas noticias en consola:
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.
1const id = document.getElementById.bind(document) 2const q = document.querySelector.bind(document) 3const all = document.querySelectorAll.bind(document) 4
Ahora ya puedes usar tus métodos abreviados en tus proyectos.
1const button = id('button') 2
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