DOM "Document Object Model"

El DOM "Document Object Model" da una representación del documento HTML, sirve como referencia para el navegador al colocar elementos en la página web. Las ubicaciones donde los elementos se colocan en el DOM se denominan Nodes, y en la página web, no solo los elementos HTML obtienen su nodo, sino que los atributos de los elementos HTML, cada fragmento de texto tiene su nodo (nodos de texto). La relación estructural de estos nodos refleja la estructura del documento HTML. Por eso, podemos definir las relaciones entre los elementos en la página como las relaciones entre sus nodos en el DOM.

  
  <!doctype html>
  <html lang="en">
   <head>
     <title>My first web page</title>
    </head>
   <body>
      <h1>Hello, world!</h1>
      <p>How are you?</p>
    </body>
  </html>

Este documento puede representarse como el siguiente árbol de nodos:

html
- head
  - title
    - My first web page
- body
  - h1
    - Hello, world!
  - p
    - How are you?

Podemos manipular los elementos de la página web con un lenguaje de programación, como JavaScript, lo hacemos a través de sus nodos DOM. Al acceder a un nodo DOM de un elemento dado, podemos manipular sus propiedades, como posición, apariencia, contenido, comportamiento, etc. A menudo queremos realizar acciones en los elementos que tienen algún tipo de relación entre ellos, conocidos como nodos relacionados.