• Def.
• Cómo se "prepara"
  • Tras procesar el HTML (de forma síncrona, secuencial. Ej.: si hay un script en el head, la carga del contenido del html se detiene hasta que ese script se haya cargado (por eso se recomienda meterlo abajo del todo en el body))
  • De forma asíncrona
    • script defer
      • Si hay un script dentro del head (o donde sea) con el atributo defer, dicho script se cargará después de que se haya cargado todo el html
      • evita que la carga de un script pesado bloquee el contenido "visual" de la página
      • antes del evento DOMContentLoaded, que espera a que el script haya cargado para ejecutarse
      • Aquí no habría problema con el DOM, ya que los scripts con este atributo se cargarían después de que se haya cargado todo el contenido del html
    • script async
      • El script se carga en segundo plano, a la vez que se carga el html
      • DOMContentLoaded no espera a que el script haya cargado
      • No es recomendable usar el DOM en este tipo de casos donde se usa async en los scripts, ya que si carga antes el script que un elemento del html que por ej. tenga una clase a la que estamos referenciando en el script para manipular el DOM, se bloquearía el contenido de la página
  • Tras procesar algo (imágenes, scripts, etc.) mediante el evento window.onload
• Tras acceder a un elemento del DOM, mediante por ej querySelectorAll(), podemos manipularlo mediante:
  • innerHtml: Contenido entre las etiquetas de apertura y cierre de un elemento. Siempre será de tipo string
  • innerText
  • appendChild(elementoY): añade a un elemento X un elemento hijo (elementoY en este ejemplo)
  • style
    ej. element.style.backgroundColor = 'red'
• Navegación
  • parentNode
  • childNodes (lista de elementos hijos)
  • Hermanos
    • previousSibling
    • nextSibling
  • Añadir un elemeno:
    • createElement() - crea un elemento huérfano (sin parentNode), por lo que no sería visible
      • habría que hacerle hijo (no valdría sibling) de otro elemento:
        • añadiéndole a una lista childNodes de otro elemento
        • appendChild
          element.appendChild(elementoHuérfano)
        • insertAdjacentElement
          element.insertAdjacentElement('afterend', elementoHuérfano)
  • Eliminar elemento:
    • remove()
    • removeChild(element)
• Nodos del DOM
  • Document
  • Element
  • Text
  • Attribute