Consultando el DOM con getElementById y querySelector

Curso de JavaScript: Manipulación del DOM

Entendiendo el DOM

¿Para qué aprender JavaScript?

¿Qué es DOM y Window Object?

Explorando Nodos del DOM

Seleccionando y Accesando a Elementos del DOM

Consultando el DOM con getElementById y querySelector

Navegación efectiva entre nodos

Manipulando Elementos del DOM

Modificando atributos y propiedades

Modificando texto en HTML

Modificando estilos en HTML

Modificando la visibilidad de elementos HTML

Creación de elementos con HTML Strings e insertAdjacentElement()

Agregando elementos con innerHTML e insertAdjacentHTML()

Creación de elementos con createElement()

Remover elementos con remove() y removeChild()

Clonación y reemplazo de elementos con cloneNode y replaceChild

Manipulando Eventos en el DOM

Entendiendo eventos y tipos: Burbuja, Captura y Propagación

Agregar y eliminar escuchadores de eventos o Event Listeners

El objeto evento o eventObject

Manejo de entradas de formulario y validación

Delegación de eventos y prevención de comportamiento predeterminado

Creando un Administrador de Tareas

Añadir tareas desde un formulario

Eliminar y editar tareas del DOM

Almacenamiento y carga de datos en localStorage

Eliminar y editar tareas del almacenamiento local

Inspeccionando y solucionando errores en el código

Personalizando la interfaz del administrador de tareas

Aún hay más por aprender

Asincronía en JavaScript

¿Cómo funciona el JavaScript Engine?

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Si ya tienes una cuenta,

Recursos

Aportes 6

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Mario Alejandro Ortega Palma

hace 3 meses

Cuando nos mencionan performance hay que entender HTMLcollection vs NodeList: 1. **HTMLCollection** * Es una colección de elementos que se actualiza dinámicamente, es decir, refleja automáticamente (en tiempo real) cualquier cambio en el DOM. * Se obtiene mediante `getElementsByTagName`, `getElementsByClassName`,` children`. 2. NodeList * Es una colección de nodos, que puede incluir elementos y otros tipos de nodos (como texto). * Se obtiene mediante métodos como con `childNodes`, `document.createNodeIterator()` que si son dinámicos. Y con `querySelectorAll` que **NO** es dinámico por lo cual los cambios realizados no se actualizan en tiempo real en el DOM. Se debe evaluar el contexto para decidir cuál usar: * Usa `HTMLCollection` cuando necesitas que la colección se actualice automáticamente con los cambios en el DOM. * Usa `querySelectorAll` cuando una `NodeList` estática sea suficiente.

Facundo Peralta

hace 3 meses

Diego explica tan bien! Un crack!

Natalia Gallego Heras

hace 2 meses

Agradezco tanto que el profesor Diego utilice la consola del navegador como herramienta 🚀 Acostumbrarse a utilizarla es un superpoder desde mi punto de vista. ```js //Trae un solo elemento document.getElementById('app-id') document.querySelector('#app-title') document.querySelector('p') //Trae todos los elementos document.getElementsByClassName('menu-items') document.getElementsByTagName('p') document.querySelectorAll('.menu-items') ```

Matias Ezequiel Rivero

hace 2 meses

Los elementos `<menu>` y [`

`](https://developer.mozilla.org/es/docs/Web/HTML/Element/ul) contiene principalmente elementos para mostrar, mientras que `<menu>` estaba destinado a elementos interactivos. El elemento [`<menuitem>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element "Esta página está disponible solo en inglés") relacionado ha quedado obsoleto. <https://developer.mozilla.org/es/docs/Web/HTML/Element/menu>

Victor R Vele

hace 3 meses

Espero entender agradezco su buena disposición de enseñar es lo máximo

Fernado Michael Acosta Panchez

hace un mes

Excelente clase! así deben enseñar al grano, sin rodeos. Gracias profe!