Estructura del Dom

Nota

El DOM se puede visualizar como un árbol, donde cada nodo del árbol representa un elemento HTML. El nodo raíz del árbol representa el documento HTML completo. Los nodos hijos del nodo raíz representan los elementos HTML que están dentro del documento. 

Estructura del DOM en un Documento HTML Básico:
DOM
└── Document
   ├─── HTML
   │    ├── HEAD
   │    │   └── TITLE
   │    │       └── "Mi página web"
   │    └── BODY
   │        ├── H1
   │        │   └── "Hola mundo"
   │        └── P
   │            └── "Esta es una página web muy simple"
   └── Otros objetos globales, como Window, Navigator, etc.

Tipos de Nodos

  • Nodo de elemento: Representa un elemento HTML, como una etiqueta <div/> o <p/>.
  • Nodo de texto: Representa un fragmento de texto.
  • Nodo de comentario: Representa un comentario HTML.
  • Nodo de atributo: Representa un atributo de un elemento HTML.
  • Nodo de documento: Representa el documento HTML completo.

Relación entre nodos

Los nodos del DOM están relacionados entre sí de varias maneras. La relación más importante es la relación padre-hijo. Cada nodo tiene un nodo padre, que es el nodo que lo contiene. Por ejemplo, todos los elementos HTML dentro de un contenedor <div/> son nodos hijos del <div/>.

Otras relaciones

  • Relación hermano: Dos nodos son hermanos si tienen el mismo nodo padre. Por ejemplo, todos los elementos HTML dentro del mismo <div/> son hermanos.
  • Relación ancestro: Un nodo es ancestro de otro nodo si está más arriba en el árbol del DOM. Por ejemplo, el nodo raíz es ancestro de todos los demás nodos del documento.
  • Relación descendiente: Un nodo es descendiente de otro nodo si está más abajo en el árbol del DOM. Por ejemplo, todos los elementos HTML dentro de un contenedor <div/> son descendientes del <div/>.

JavaScript para interactuar con el DOM

JavaScript proporciona una API que permite a los desarrolladores interactuar con el DOM. Esta API incluye funciones y métodos que permiten a los desarrolladores acceder a los elementos HTML del DOM, modificar sus propiedades y relaciones, y crear nuevos elementos HTML.

En las siguientes lecciones aprenderás a usar los métodos más comunes

Prueba tu conocimiento

¿Cuál de los siguientes es un tipo de nodo del DOM?

✨ Correcto: ❌ Incorrecto:

La relación más importante es la relación padre-hijo.

✨ Correcto: ❌ Incorrecto:

¿Cuál es la relación entre un elemento y su contenido?

✨ Correcto: ❌ Incorrecto:
Atrás

2

Siguiente