Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprende Desafío: Consultar y Seleccionar Elementos del DOM | Manipulación del DOM para el Desarrollo Web Interactivo
Maestría Avanzada en JavaScript

bookDesafío: Consultar y Seleccionar Elementos del DOM

Tarea

Tienes una lista de compras en tu HTML y necesitas seleccionar elementos específicos utilizando varios métodos de consulta del DOM.

  1. Seleccionar por ID: Seleccionar el elemento <h1> con el ID title;
  2. Seleccionar por clase: Seleccionar todos los elementos con la clase item;
  3. Seleccionar por etiqueta: Seleccionar todos los elementos <li>;
  4. Seleccionar el primer elemento coincidente: Seleccionar el primer elemento <li> con la clase item;
  5. Seleccionar todos los elementos coincidentes: Seleccionar todos los elementos <li> con la clase item.
index.html

index.html

index.css

index.css

index.js

index.js

copy
  • Utilizar getElementById para seleccionar el elemento <h1> con el ID title;
  • Utilizar getElementsByClassName para seleccionar todos los elementos con la clase item;
  • Utilizar getElementsByTagName para seleccionar todos los elementos <li>;
  • Utilizar querySelector para seleccionar el primer elemento <li> con la clase item;
  • Utilizar querySelectorAll para seleccionar todos los elementos <li> con la clase item.
index.html

index.html

index.css

index.css

index.js

index.js

copy

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 2. Capítulo 3

Pregunte a AI

expand

Pregunte a AI

ChatGPT

Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla

Suggested prompts:

Can you show me the HTML structure of the shopping list?

Can you provide example code for each selection method?

Can you explain the difference between querySelector and querySelectorAll?

Awesome!

Completion rate improved to 2.22

bookDesafío: Consultar y Seleccionar Elementos del DOM

Desliza para mostrar el menú

Tarea

Tienes una lista de compras en tu HTML y necesitas seleccionar elementos específicos utilizando varios métodos de consulta del DOM.

  1. Seleccionar por ID: Seleccionar el elemento <h1> con el ID title;
  2. Seleccionar por clase: Seleccionar todos los elementos con la clase item;
  3. Seleccionar por etiqueta: Seleccionar todos los elementos <li>;
  4. Seleccionar el primer elemento coincidente: Seleccionar el primer elemento <li> con la clase item;
  5. Seleccionar todos los elementos coincidentes: Seleccionar todos los elementos <li> con la clase item.
index.html

index.html

index.css

index.css

index.js

index.js

copy
  • Utilizar getElementById para seleccionar el elemento <h1> con el ID title;
  • Utilizar getElementsByClassName para seleccionar todos los elementos con la clase item;
  • Utilizar getElementsByTagName para seleccionar todos los elementos <li>;
  • Utilizar querySelector para seleccionar el primer elemento <li> con la clase item;
  • Utilizar querySelectorAll para seleccionar todos los elementos <li> con la clase item.
index.html

index.html

index.css

index.css

index.js

index.js

copy

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 2. Capítulo 3
some-alt