Para tener una comprensión sólida de cómo manipular el DOM con JavaScript, primero debemos familiarizarnos con los conceptos básicos y la estructura del DOM. Estos conceptos son fundamentales para cualquier tipo de manipulación que realicemos más adelante.

Árbol del DOM

El DOM representa la estructura de un documento HTML como un árbol de nodos. Cada nodo en el árbol puede ser un elemento, un atributo o un fragmento de texto. La raíz del árbol es el objeto document, que representa el documento entero.

[Placeholder: Diagrama de un árbol DOM con document como raíz y varios nodos hijos representando elementos HTML.]

Tipos de Nodos

En el DOM existen varios tipos de nodos, los más comunes son:

• Elementos: Representan las etiquetas HTML. Por ejemplo, <div>, <p>, <a>, etc.
• Atributos: Proveen información adicional sobre un elemento. Por ejemplo, el atributo src de una etiqueta <img>.
• Texto: Representa el contenido textual dentro de un elemento.
• Comentarios: Representan los comentarios en HTML.

Acceso al DOM

El acceso al DOM se realiza a través de un lenguaje de scripting como JavaScript. Una vez que tenemos acceso al DOM, podemos utilizar varias funciones para seleccionar, modificar y manipular los nodos.

Selección de Elementos

Antes de poder manipular elementos en el DOM, primero necesitamos seleccionarlos. Las técnicas básicas incluyen:

• document.getElementById(id): Selecciona un elemento por su ID.
• document.getElementsByClassName(className): Selecciona todos los elementos con la clase especificada.
• document.getElementsByTagName(tagName): Selecciona todos los elementos con el nombre de etiqueta especificado.
• document.querySelector(selector): Selecciona el primer elemento que coincide con el selector CSS especificado.
• document.querySelectorAll(selector): Selecciona todos los elementos que coinciden con el selector CSS especificado.

Ejemplo de Selección de Elementos

Veamos un ejemplo sencillo de selección de elementos:

html

Conclusión

Comprender los conceptos básicos del DOM y cómo acceder a los distintos elementos del DOM es crucial para su manipulación. En los próximos capítulos, profundizaremos en cómo interactuar con estos elementos de manera más avanzada, modificando atributos, contenido y estructuras.