Skip to main content

Introducción al DOM

🏁 Objetivos​

  • Que te introduzcas al DOM y sus conceptos principales
  • Que puedas acceder a elementos del DOM mediante JavaScript
  • Que puedas manipular las clases y los estilos de elementos del DOM

📝 Contenidos​

El modelo de objeto del documento

  • El entorno del navegador
  • Variables de entorno
  • El objeto window
  • DOM y BOM
  • Estructura del DOM
  • El objeto document
  • Etiquetas como objetos (anidados)
  • Nodos y tipos de nodos
  • Inspeccionando el DOM en la consola
  • Inspeccionando un nodo
  • console.log vs console.dir

Buscando elementos

  • Buscando elementos del DOM:
    • getElementById
    • querySelector

Trabajando con clases

  • La propiedad classList
  • Usando clases para modificar estilos de forma dinámica
  • Métodos de classList:
    • add
    • remove
    • toggle
    • contains

Trabajando con estilos

  • La propiedad style
  • Modificando estilos
  • Estilos computados para leer estilos

Trabajando con atributos

  • href
  • src
  • el atributo data y dataset

Modificando el texto

  • innerText

🚀 Recursos de la clase​

📆 Fecha

📹 Grabación

👩‍💻 Código

💪 Ejercitación

📚 Material de lectura​

En inglés

🔍 Para seguir investigando​

En inglés