Curso de JavaScript
Dale vida a la web.
Aprende a programar, crea interacciones y construye proyectos reales.
Antes de modificar algo en la página, primero necesitas seleccionarlo. document.getElementById, querySelector y querySelectorAll son las formas más comunes de encontrar elementos del HTML desde JavaScript.
Explicación
Antes de modificar algo en la página, primero necesitas seleccionarlo. Estos tres métodos son las formas más comunes de hacerlo:
document.getElementById("id")Busca un único elemento por su atributo id (sin el símbolo #) y lo devuelve, o null si no existe.
document.querySelector("selector")Busca el primer elemento que coincide con un selector CSS (como .clase, #id o una etiqueta) y lo devuelve.
document.querySelectorAll("selector")Busca todos los elementos que coinciden con un selector CSS y devuelve una lista (NodeList) con todos ellos.
lista.lengthUna NodeList tiene una propiedad length, igual que un array, que indica cuántos elementos contiene.
Reto rápido
Agrega un cuarto <li class="tarea">...</li> a la lista y confirma que el contador del mensaje sube a 3 tareas.
En esta lección
- Ejemplo interactivo
- Explicación de cada etiqueta
- Cuándo usarlo
- Errores comunes
Consejo
getElementById es el más rápido porque busca un id único, pero querySelector y querySelectorAll son más flexibles porque aceptan cualquier selector CSS que ya conoces.
Dato extra
querySelectorAll no devuelve un array real sino un NodeList. Se parece mucho (tiene length y se puede recorrer con forEach), pero no tiene métodos de array como map o filter directamente.
Error común
Escribir document.querySelector("primero") en vez de document.querySelector("#primero"): querySelector necesita el selector CSS completo, con # para ids y . para clases, a diferencia de getElementById que solo pide el nombre.
Siguiente paso
Ya sabes seleccionar elementos de la página. Ahora vamos a modificarlos: cambiar su texto, sus clases y su estilo.
Ir a la siguiente lección