El Document Object Model (DOM) es una interfaz de programación que permite a los scripts acceder y manipular el contenido, la estructura y el estilo de un documento HTML. JavaScript es el lenguaje más comúnmente utilizado para interactuar con el DOM. Veamos cómo funciona

¿Qué es el DOM?

El DOM representa la estructura del documento HTML como un árbol de nodos. Cada elemento HTML se convierte en un objeto que puedes manipular con JavaScript. Por ejemplo, un documento HTML simple se vería así


<code class="language-html"><!DOCTYPE html>
<html>
<head>
    <title>Ejemplo de DOM</title>
</head>
<body>
    <h1 id="titulo">Hola, mundo!</h1>
    <p>Este es un ejemplo de cómo funciona el DOM.</p>
    <button id="cambiarTitulo">Cambiar título</button>

    <script>
        // Función para cambiar el título
        document.getElementById('cambiarTitulo').onclick = function() {
            document.getElementById('titulo').textContent = '¡Título cambiado!';
        };
    </script>
</body>
</html>code>

Hola, mundo!

Este es un ejemplo de cómo funciona el DOM.


    

NOTA: Se vería así. Si quieres verlo en funcionamiento, visita este enlace: cambiar_titulo.html

Otro ejemplo que además cambia los márgenes del título (<h1></h1>)

Veamos otro ejemplo que incluye una función para cambiar los márgenes: cambiar_margen.html

Código completo:

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de DOM</title>
<style>
/* Estilo inicial para el título */
#titulo {
margin-left: 20px;
margin-top: 20px;
}
</style>
</head>
<body>
<h1 id="titulo">Hola, mundo!</h1>
<p>Este es un ejemplo de cómo funciona el DOM.</p>
<button id="cambiarTitulo">Cambiar Título</button>
<button id="cambiarMargenes">Cambiar Márgenes</button>

// Función para cambiar los márgenes
document.getElementById('cambiarMargenes').onclick = function() {
document.getElementById('titulo').style.marginLeft = '50px';
document.getElementById('titulo').style.marginTop = '50px';
};
</script>
</body>
</html>

Acceder a elementos del DOM

Puedes acceder a los elementos del DOM utilizando varios métodos:

getElementById

Este método permite seleccionar un elemento por su ID.

const titulo = document.getElementById('titulo');
console.log(titulo.textContent); // Muestra "Hola, mundo!"

getElementsByClassName

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

const descripciones = document.getElementsByClassName('descripcion');
console.log(descripciones[0].textContent); // Muestra "Este es un ejemplo de cómo funciona el DOM."

querySelector

Este método permite seleccionar el primer elemento que coincide con un selector CSS.

const boton = document.querySelector('#boton');
console.log(boton.textContent); // Muestra "Cambiar título"

Modificar elementos del DOM

Una vez que has accedido a un elemento, puedes modificar su contenido, atributos y estilos.

Cambiar el texto

Puedes cambiar el texto de un elemento utilizando textContent o innerHTML.

titulo.textContent = 'Título modificado';

Cambiar atributos

Puedes cambiar atributos como src, href, class, etc.

boton.setAttribute('class', 'nuevo-boton');

Cambiar estilos

Puedes modificar los estilos CSS directamente desde JavaScript.

titulo.style.color = 'blue';
titulo.style.fontSize = '24px';

Agregar y eliminar elementos

Puedes crear nuevos elementos y agregarlos al DOM, así como eliminar elementos existentes.

Agregar un nuevo elemento

const nuevoParrafo = document.createElement('p');
nuevoParrafo.textContent = 'Este es un nuevo párrafo.';
document.body.appendChild(nuevoParrafo);

Eliminar un elemento

const parrafos = document.getElementsByTagName('p');
document.body.removeChild(parrafos[0]); // Elimina el primer párrafo

Manejo de eventos

JavaScript permite manejar eventos como clics, desplazamientos y más.

Agregar un evento a un botón

boton.addEventListener('click', function() {
    titulo.textContent = 'Título cambiado al hacer clic';
});

JavaScript y el Document Object Model (DOM)

Hola, mundo!

Valora esta FAQ

Etiquetas

Artículos relacionados