DOM (Document Object Model) en JavaScript

El DOM (Document Object Model) es la representación en forma de árbol de la estructura de un documento HTML. Permite a JavaScript interactuar y manipular los elementos y contenido de una página web. Vamos a explorar cómo trabajar con el DOM para interactuar con elementos de la página.

Acceso a Elementos

Puedes acceder a elementos del DOM usando diversos métodos. Algunos ejemplos comunes son:

Por ID

const miElemento = document.getElementById('miElemento');

Por Clase

const elementos = document.getElementsByClassName('miClase');

Por Etiqueta

const parrafos = document.getElementsByTagName('p');

Por Selector CSS

const primerElemento = document.querySelector('#miElemento');

const elementos = document.querySelectorAll('.miClase');

Modificación de Contenido

Puedes cambiar el contenido de un elemento del DOM usando la propiedad `innerHTML`.

const miElemento = document.getElementById('miElemento');

miElemento.innerHTML = 'Nuevo contenido';

Modificación de Atributos

Puedes cambiar o añadir atributos a un elemento del DOM usando la propiedad `setAttribute`.

const miElemento = document.getElementById('miElemento');

miElemento.setAttribute('nuevoAtributo', 'valor');

Modificación de Estilos CSS

Puedes cambiar estilos de un elemento del DOM usando la propiedad `style`.

const miElemento = document.getElementById('miElemento');

miElemento.style.color = 'red';

miElemento.style.fontSize = '20px';

Creación de Nuevos Elementos

Puedes crear nuevos elementos y agregarlos al DOM.

const nuevoElemento = document.createElement('div');

nuevoElemento.textContent = 'Nuevo elemento';

document.body.appendChild(nuevoElemento);

Eliminación de Elementos

Puedes eliminar elementos del DOM.

const elementoAEliminar = document.getElementById('elementoAEliminar');

elementoAEliminar.remove();

Eventos

Ya exploramos eventos previamente. Aquí te mostramos cómo puedes agregar event listeners a los elementos.

const miElemento = document.getElementById('miElemento');

miElemento.addEventListener('click', function() {

    alert('Se hizo clic en el elemento.');

});

Traversing (Recorrer el DOM)

Puedes recorrer y acceder a diferentes partes del DOM usando propiedades como `parentNode`, `childNodes`, `firstChild`, `lastChild`, etc.

const primerHijo = document.getElementById('miElemento').firstChild;

const padre = primerHijo.parentNode;

Estas son las formas básicas de manipular el DOM en JavaScript. Utiliza estas técnicas para cambiar contenido, estilos y comportamiento de tu página web de forma dinámica. ¡Sigue practicando y experimentando con el DOM para mejorar tus habilidades en JavaScript!