El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

¿Qué es el DOM?

El Modelo de Objetos del Documento (DOM, por sus siglas en inglés) es una interfaz de programación para documentos HTML y XML. Representa la estructura del documento como un árbol de nodos, donde cada nodo es una parte del documento (como un elemento, un atributo o un texto).

Conceptos Clave del DOM

Nodo: Cada punto en el árbol del DOM es un nodo. Los nodos pueden ser elementos, atributos, textos, etc.
Elemento: Un tipo específico de nodo que representa una etiqueta HTML.
Atributo: Un nodo que proporciona información adicional sobre un elemento.
Texto: Un nodo que contiene el contenido textual de un elemento.

Estructura del DOM

El DOM organiza los elementos de un documento HTML en una estructura jerárquica. Aquí hay un ejemplo simple de un documento HTML y su representación en el DOM:

<!DOCTYPE html>
<html>
  <head>
    <title>Mi Documento</title>
  </head>
  <body>
    <h1>Hola Mundo</h1>
    <p>Este es un párrafo.</p>
  </body>
</html>

La estructura del DOM para este documento sería:

- Document
  - html
    - head
      - title
        - "Mi Documento"
    - body
      - h1
        - "Hola Mundo"
      - p
        - "Este es un párrafo."

Interactuando con el DOM usando JavaScript

JavaScript proporciona varias formas de interactuar con el DOM. A continuación, veremos cómo seleccionar elementos, manipularlos y crear nuevos elementos.

Selección de Elementos

Para interactuar con los elementos del DOM, primero necesitamos seleccionarlos. Aquí hay algunas formas comunes de hacerlo:

`getElementById`

Selecciona un elemento por su ID.

let header = document.getElementById('header');

`getElementsByClassName`

Selecciona todos los elementos con una clase específica.

let items = document.getElementsByClassName('item');

`getElementsByTagName`

Selecciona todos los elementos con una etiqueta específica.

let paragraphs = document.getElementsByTagName('p');

`querySelector`

Selecciona el primer elemento que coincide con un selector CSS.

let firstItem = document.querySelector('.item');

`querySelectorAll`

Selecciona todos los elementos que coinciden con un selector CSS.

let allItems = document.querySelectorAll('.item');

Manipulación de Elementos

Una vez que hemos seleccionado un elemento, podemos manipularlo de varias maneras.

Cambiar el Contenido de Texto

let header = document.getElementById('header');
header.textContent = 'Nuevo Título';

Cambiar el HTML Interno

let paragraph = document.querySelector('p');
paragraph.innerHTML = '<strong>Texto en negrita</strong>';

Cambiar Atributos

let image = document.querySelector('img');
image.src = 'nueva-imagen.jpg';

Cambiar Estilos

let header = document.getElementById('header');
header.style.color = 'blue';
header.style.fontSize = '24px';

Creación y Eliminación de Elementos

Crear un Nuevo Elemento

let newDiv = document.createElement('div');
newDiv.textContent = 'Este es un nuevo div';
document.body.appendChild(newDiv);

Eliminar un Elemento

let oldDiv = document.getElementById('oldDiv');
oldDiv.parentNode.removeChild(oldDiv);

Ejercicio Práctico

Ejercicio 1: Manipulación Básica del DOM

Crea un archivo HTML con el siguiente contenido:

<!DOCTYPE html>
<html>
<head>
  <title>Manipulación del DOM</title>
</head>
<body>
  <h1 id="header">Título Original</h1>
  <p class="text">Este es un párrafo.</p>
  <button id="changeText">Cambiar Texto</button>
  <button id="addElement">Agregar Elemento</button>
</body>
</html>

Crea un archivo JavaScript y enlázalo en el archivo HTML. Luego, agrega el siguiente código JavaScript:

document.getElementById('changeText').addEventListener('click', function() {
  let header = document.getElementById('header');
  header.textContent = 'Título Modificado';
});

document.getElementById('addElement').addEventListener('click', function() {
  let newParagraph = document.createElement('p');
  newParagraph.textContent = 'Este es un nuevo párrafo.';
  document.body.appendChild(newParagraph);
});

Solución

El código JavaScript anterior agrega dos manejadores de eventos a los botones. Cuando se hace clic en el botón "Cambiar Texto", se cambia el contenido del encabezado. Cuando se hace clic en el botón "Agregar Elemento", se agrega un nuevo párrafo al cuerpo del documento.

Conclusión

En esta lección, hemos aprendido qué es el DOM y cómo interactuar con él usando JavaScript. Hemos cubierto cómo seleccionar elementos, manipular su contenido y atributos, y cómo crear y eliminar elementos. Estos conceptos son fundamentales para trabajar con JavaScript en el contexto de la manipulación de documentos HTML.

En la siguiente lección, profundizaremos en la selección y manipulación de elementos del DOM, explorando técnicas más avanzadas y prácticas comunes.

Introducción al DOM

¿Qué es el DOM?

Conceptos Clave del DOM

Estructura del DOM

Interactuando con el DOM usando JavaScript

Selección de Elementos

`getElementById`

`getElementsByClassName`

`getElementsByTagName`

`querySelector`

`querySelectorAll`

Manipulación de Elementos

Cambiar el Contenido de Texto

Cambiar el HTML Interno

Cambiar Atributos

Cambiar Estilos

Creación y Eliminación de Elementos

Crear un Nuevo Elemento

Eliminar un Elemento

Ejercicio Práctico

Ejercicio 1: Manipulación Básica del DOM

Solución

Conclusión

JavaScript: De Principiante a Avanzado

Módulo 1: Introducción a JavaScript

Módulo 2: Estructuras de Control

Módulo 3: Funciones

Módulo 4: Objetos y Arrays

Módulo 5: Objetos y Funciones Avanzadas

Módulo 6: El Modelo de Objetos del Documento (DOM)

Módulo 7: APIs del Navegador y Temas Avanzados

Módulo 8: Pruebas y Depuración

Módulo 9: Rendimiento y Optimización

Módulo 10: Frameworks y Librerías de JavaScript

Módulo 11: Proyecto Final