Selección de Elementos del DOM con JavaScript
Contenido del curso
Seleccionando y Accesando a Elementos del DOM
Manipulando Elementos del DOM
- 6
Atributos y Propiedades en HTML y su Manipulación con JavaScript
07:39 min - 7
Modificar texto en HTML con JavaScript
04:49 min - 8
Modificar Estilos CSS con JavaScript: Propiedad Style y ClassName
11:30 min - 9
Uso de classList para Manipular Clases en Elementos HTML
07:37 min - 10
Manipulación del DOM con innerHTML e InsertAdjacentHTML
09:47 min - 11
Agregar elementos HTML sin reemplazar contenido existente
05:17 min - 12
Creación y Manipulación de Elementos DOM con createElement
13:28 min - 13
remove() vs removeChild() en el DOM
05:42 min - 14
Clonación y Reemplazo de Elementos en JavaScript
12:47 min
Manipulando Eventos en el DOM
- 15
Eventos y Flujo en Programación Web: Capturing y Bubbling
05:03 min - 16
Eventos del mouse y clic en JavaScript
11:46 min - 17
Qué es event.target y cómo usarlo
07:35 min - 18
Validación de Formularios con JavaScript: Prevenir Comportamiento por Defecto
10:06 min - 19
Delegation Pattern en JavaScript: Mejora de Eventos Click en Listas
09:29 min
Asincronía en JavaScript
Creando un Administrador de Tareas
- 21
Creación de un Task Manager con Persistencia usando Local Storage
09:01 min - 22
Editar y borrar tareas con delegación de eventos
13:35 min - 23
Persistencia de Datos con Local Storage en Tareas Web
15:17 min - 24
Guardado y edición de tareas en local storage con JavaScript
10:59 min - 25
Manejo de Errores en Local Storage para Tareas Dinámicas
03:24 min - 26
Persistencia de tema dark/light con localStorage
07:18 min - 27
Creación de Páginas Web Dinámicas con JavaScript
01:28 min
Selección de Elementos del DOM con JavaScript
Resumen
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?
getElementsByClassNamedevuelve una HTMLCollection con todos los elementos que comparten la misma clase [4:30].
javascript document.getElementsByClassName('menu-items');
getElementsByTagNamehace 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:
getElementByIdoquerySelector. - Múltiples elementos:
getElementsByClassName,getElementsByTagNameoquerySelectorAll. - 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.
