Manipular una página web de forma dinámica comienza con un paso fundamental: saber cómo seleccionar los elementos del DOM. Sin esta habilidad, cualquier intento de cambiar texto, estilos o estructura queda fuera de alcance. A continuación se explican las distintas formas de acceder a esos elementos y cuándo conviene usar cada una.
¿Por qué es importante seleccionar elementos del DOM?
Imagina que necesitas personalizar el título de una página para mostrar el nombre del usuario que acaba de ingresar [0:42]. Para lograrlo, primero debes localizar ese elemento específico dentro del documento y, solo después, modificar su contenido con JavaScript. Así es como las páginas estáticas se convierten en páginas dinámicas, con comportamiento que depende de datos concretos.
El objeto document es el punto de entrada. Representa todo el documento HTML y expone métodos que permiten buscar elementos por diferentes criterios: su id, su clase, su etiqueta o incluso atributos personalizados [1:30].
¿Cómo seleccionar elementos únicos?
¿Qué hace getElementById?
Cuando un elemento posee un id, las buenas prácticas dictan que ese identificador sea único en todo el documento [2:18]. Por eso document.getElementById() devuelve exactamente un elemento.
javascript
document.getElementById('app-title');
Este método recibe únicamente el nombre del id, sin ningún prefijo [2:50]. Es la forma más directa de acceder a un elemento que sabes irrepetible.
¿Cuándo usar querySelector?
El método document.querySelector() es más flexible: acepta selectores CSS completos [3:15]. Si buscas por id, debes anteponer el símbolo #; si buscas por etiqueta, basta con escribir el nombre de la etiqueta.
javascript
document.querySelector('#app-title');
document.querySelector('p');
Un detalle clave: cuando existen varios elementos que coinciden con el selector, querySelector siempre devuelve solo el primero que encuentre [3:55]. Esto lo diferencia de los métodos que devuelven colecciones.
¿Cómo obtener múltiples elementos a la vez?
¿Qué diferencia hay entre getElementsByClassName y getElementsByTagName?
getElementsByClassName devuelve una HTMLCollection con todos los elementos que comparten la misma clase [4:30].
javascript
document.getElementsByClassName('menu-items');
getElementsByTagName hace lo mismo, pero filtrando por el nombre de la etiqueta HTML [5:40].
javascript
document.getElementsByTagName('p');
Ambos métodos usan getElements (en plural) porque anticipan que habrá más de un resultado. El valor devuelto es una colección de elementos HTML (HTMLCollection) con una propiedad length que indica cuántos encontró [5:10].
¿Qué aporta querySelectorAll?
Funciona de manera similar a querySelector, pero en lugar de quedarse con el primero, devuelve todos los elementos que coincidan [6:25].
javascript
document.querySelectorAll('.menu-items');
La diferencia técnica es que este método regresa una lista de nodos (NodeList) en lugar de una HTMLCollection [6:50]. Una NodeList puede contener no solo elementos HTML, sino también nodos de texto y otros tipos de nodos generados dentro del DOM. Esto la hace más versátil para ciertos escenarios de manipulación.
¿Cuál es la diferencia de rendimiento entre estos métodos?
Aunque en proyectos pequeños la diferencia es casi imperceptible, existe un aspecto de performance que conviene conocer [7:22]. Los métodos getElementById, getElementsByClassName y getElementsByTagName ejecutan la búsqueda más rápido que querySelector y querySelectorAll. Estos últimos son más modernos y flexibles, y la comunidad los promueve cada vez más, pero si la velocidad de consulta resulta crítica en tu aplicación, los métodos clásicos siguen siendo la opción más eficiente [7:50].
En resumen, las formas de selección se pueden agrupar así:
- Elemento único:
getElementById o querySelector.
- Múltiples elementos:
getElementsByClassName, getElementsByTagName o querySelectorAll.
- Mayor velocidad: familia
getElement/s.
- Mayor flexibilidad con selectores CSS: familia
querySelector.
Dominar estas herramientas es el primer paso para transformar cualquier página estática en una experiencia interactiva. ¿Ya decidiste cuál método se ajusta mejor a tu próximo proyecto? Comparte tu experiencia en los comentarios.
