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:
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