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?
¿Qué es DOM y Window Object?
2/27Aportes 7
Preguntas 0
Arranquemos entendiendo qué es el DOM. Sus siglas son Document Object Model.
Cuando abrimos el sitio web de Platzi, el navegador se comunica con un servidor solicitando ciertos archivos, el servidor se los manda para que pueda renderizar la página con la que estamos interactuando.
En esta clase nos vamos a centrar en la “Creación del árbol del DOM”, este es el momento en el que se empieza a generar el DOM. Lo que hace básicamente el navegador es que una vez que termina de interpretar, o traducir el HTML, genera en orden de jerarquía un árbol con varios nodos. Este árbol se lee de arriba hacia abajo, es decir, de los padres hacia los hijos. Es importante mencionar que estos nodos son objetos en Javascript y etiquetas en HTML. Mediante JS podremos seleccionar estos nodos para luego manipularnos.
El DOM se puede entender como una WebAPI que nos dá prácticamente el navegador.
Existen dos tipos de objetos: “Document Object Model” y “Window Object”.
Cuando por ejemplo tenemos abierta la ventana del sitio de Platzi, estamos visualizando lo que se conoce como “Window Object”. El Window Object encierra al DOM.
Nosotros tenemos acceso a la WebAPI DOM gracias a que tenemos abierta la pantalla del navegador que es ese Window. El Window nos dá acceso a otro tipo de WebAPI, como por ejemplo si necesitamos tener acceso al micrófono o a la cámara del usuario, esto lo podremos hacer mediante las APIs del Window y no del DOM.
Si necesitamos manipular para que la página sea mucho más dinámica lo vamos a hacer mediante el DOM, seleccionando los elementos.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?