Manipulación del DOM

1. ¿Qué es el DOM?

El Document Object Model (DOM) es una interfaz de programación para documentos HTML y XML. Representa la estructura de un documento como un árbol de nodos, donde cada nodo corresponde a una parte del documento (como un elemento, atributo o texto). El DOM permite a los lenguajes de programación interactuar y manipular el contenido, la estructura y el estilo de un documento de manera dinámica.

En otras palabras, el DOM convierte el documento en un objeto que los programas pueden manipular. Cada elemento HTML se convierte en un objeto en el DOM, y las propiedades y métodos de esos objetos permiten a los desarrolladores modificar la estructura del documento y el contenido en tiempo real.

Por ejemplo, cuando utilizamos JavaScript para cambiar el contenido de una etiqueta `

`, estamos manipulando el DOM. El DOM proporciona una forma estándar de interactuar con los documentos y es esencial para la creación de sitios web interactivos.

2.1. Uso de getElementById()

Este método selecciona un elemento único del DOM usando su ID.

Texto Original

2.2. Uso de getElementsByClassName()

Este método selecciona todos los elementos del DOM que tienen una clase específica.

Elemento 1
Elemento 2

2.3. Uso de getElementsByTagName()

Este método selecciona todos los elementos del DOM que tienen una etiqueta específica.

  • Elemento 1
  • Elemento 2
  • Elemento 3

2.4. Uso de querySelector()

Este método selecciona el primer elemento del DOM que coincide con un selector CSS dado.

2.5. Uso de querySelectorAll()

Este método selecciona todos los elementos del DOM que coinciden con un selector CSS dado.

Párrafo 1

Párrafo 2

Párrafo 3