CursosEmpresasBlogLiveConfPrecios

Seleccionar elementos del DOM con JavaScript

Clase 26 de 39 • Curso de Fundamentos de JavaScript

Resumen

Aprende a controlar el DOM con JavaScript paso a paso. Desde la consola del navegador hasta selectores modernos y métodos clásicos, verás cómo leer, recorrer y preparar la manipulación de una landing de productos. Conoce qué es Document Object Model, cómo funciona su estructura en árbol y qué devuelve cada método al seleccionar elementos.

¿Qué es el DOM y cómo se conecta con JavaScript?

El DOM (Document Object Model) es la representación estructurada del documento HTML en forma de árbol. Cada etiqueta es un nodo con propiedades y relaciones. JavaScript puede leer, modificar, crear y eliminar estos nodos para cambiar contenido, estructura y estilos de una página.

  • Estructura en árbol: nodos padre e hijo que representan el HTML.
  • Acciones clave: leer, recorrer, modificar dinámicamente y estilizar.
  • Objetivo práctico: preparar una landing de productos para futuras inserciones dinámicas.

Además, se sugiere usar la extensión Live Server para correr un servidor local con recargas en tiempo real. Esto permite ver cambios inmediatos en el navegador basado en Chromium como Chrome.

¿Cómo inspeccionar y acceder al documento con la consola?

Abre las herramientas de desarrollador e ingresa a la consola. Desde ahí puedes obtener el documento completo o secciones específicas como head y body. También puedes inspeccionar visualmente elementos y su jerarquía.

¿Qué comandos básicos permiten ver el documento?

  • Ver el documento y su URL.
// Documento completo
document

// Secciones principales
document.head
document.body
  • Identificar etiquetas clave: en body verás elementos como header, main y footer, además de un script inyectado por Live Server para la recarga en tiempo real.

¿Cómo validar visualmente elementos en el inspector?

  • Usa inspeccionar para resaltar cada nodo en la página.
  • Confirma la estructura y las clases que vas a consultar.
  • Observa propiedades disponibles como innerHTML o draggable según el tipo de nodo.

¿Qué selectores y métodos usar para leer elementos del DOM?

Primero, practica con selectores modernos. Luego, refuerza con métodos clásicos que devuelven colecciones. Entiende qué retorna cada uno: un único nodo, una NodeList o una HTMLCollection.

¿Cómo usar querySelector y querySelectorAll?

  • Seleccionar por etiqueta, clase o id. Devuelve el primer match.
// Por etiqueta
document.querySelector('header')

// Por clase
document.querySelector('.producto')

// Por id
document.querySelector('#btnComprar')

// Por etiqueta específica
document.querySelector('h1') // "Productos útiles, entrega rápida"
  • Seleccionar todos los elementos que coinciden con la clase. Devuelve una NodeList indexable.
const destacados = document.querySelectorAll('.producto')
// destacados[0] -> audífonos nova
// destacados[1] -> mouse
// destacados[2] -> teclado

Claves de aprendizaje:

  • NodeList: se recorre por índice y permite iteraciones modernas.
  • Propiedades útiles: innerHTML para leer o insertar contenido, draggable para arrastrable.
  • Ideal para preparar inserciones dinámicas de contenido con JavaScript.

¿Qué métodos clásicos ayudan a obtener colecciones?

  • Por id: retorna un único elemento.
document.getElementById('btnComprar') // Botón "Ver ofertas"
  • Por clase: retorna una HTMLCollection con los elementos de navegación.
document.getElementsByClassName('nav-link')
  • Por etiqueta: retorna una HTMLCollection con todos los botones.
document.getElementsByTagName('button')

Diferencias prácticas:

  • querySelector: primer match. Útil para selecciones rápidas.
  • querySelectorAll: múltiple selección como NodeList.
  • getElementById: único nodo por id.
  • getElementsByClassName / TagName: colecciones vivas tipo HTMLCollection.

Aplicaciones inmediatas:

  • Leer el header para entender su estructura.
  • Extraer el H1 de la landing: “Productos útiles, entrega rápida”.
  • Obtener todos los productos destacados con su clase y trabajar con su lista.
  • Preparar un arreglo de objetos de opiniones de usuarios para insertarlas dinámicamente en el DOM más adelante.

Si te surgen dudas al practicar con la consola o quieres compartir un truco con selectores, deja tu comentario y continuamos la conversación.