El DOM en JavaScript

< Anterior Siguiente >

¿Qué es el DOM?

El Document Object Model (DOM) es una interfaz que los navegadores web proporcionan para representar documentos HTML o XML. El DOM organiza el contenido de un documento en una estructura de árbol, donde cada nodo del árbol representa un componente del documento (como un elemento HTML, un atributo o un texto). Esta estructura permite que los lenguajes de programación, como JavaScript, interactúen con el contenido, la estructura y el estilo de las páginas web.

Acceso y Manipulación del DOM

JavaScript ofrece varias maneras de acceder y manipular el DOM. A continuación, se presentan los métodos y propiedades más comunes:

Método/Propiedad Descripción Ejemplo
document.getElementById() Selecciona un elemento por su atributo id. 
<div id="miElemento">Texto original</div>
<script>
    var elemento = document.getElementById('miElemento');
    elemento.innerHTML = 'Texto modificado';
</script>
document.getElementsByClassName() Selecciona todos los elementos que tienen una clase específica. 
<div class="miClase">Primer div</div>
<div class="miClase">Segundo div</div>
<script>
    var elementos = document.getElementsByClassName('miClase');
    for (var i = 0; i < elementos.length; i++) {
        elementos[i].style.color = 'blue';
    }
</script>
document.getElementsByTagName() Selecciona todos los elementos que tienen un nombre de etiqueta específico. 
<div>Un div</div>
<p>Un párrafo</p>
<script>
    var elementos = document.getElementsByTagName('div');
    for (var i = 0; i < elementos.length; i++) {
        elementos[i].style.border = '1px solid red';
    }
</script>
document.querySelector() Devuelve el primer elemento que coincide con un selector CSS especificado. 
<div class="miClase">Contenido</div>
<script>
    var elemento = document.querySelector('.miClase');
    elemento.style.backgroundColor = 'yellow';
</script>
document.querySelectorAll() Devuelve todos los elementos que coinciden con un selector CSS especificado. 
<div class="miClase">Elemento 1</div>
<div class="miClase">Elemento 2</div>
<script>
    var elementos = document.querySelectorAll('.miClase');
    elementos.forEach(function(elemento) {
        elemento.style.fontSize = '20px';
    });
</script>
element.innerHTML Obtiene o establece el contenido HTML de un elemento. 
<div id="miDiv"></div>
<script>
    var div = document.getElementById('miDiv');
    div.innerHTML = '<p>Nuevo párrafo</p>';
</script>
element.textContent Obtiene o establece el contenido de texto de un elemento, sin interpretar HTML. 
<div id="miDiv">Texto original</div>
<script>
    var div = document.getElementById('miDiv');
    div.textContent = 'Texto modificado';
</script>

Ejemplos de Manipulación del DOM

Ejemplo 1: Cambiar el contenido de un elemento

Para cambiar el contenido de un elemento, podemos usar la propiedad innerHTML. Supongamos que tenemos un elemento con el id miElemento:

<div id="miElemento">Contenido original</div>

Para actualizar su contenido con JavaScript:

<script>
    document.getElementById('miElemento').innerHTML = 'Nuevo contenido';
</script>

El resultado será que el texto dentro del div se cambiará a "Nuevo contenido".

Ejemplo 2: Cambiar el estilo de un elemento

Podemos modificar el estilo de un elemento accediendo a la propiedad style. Si queremos cambiar el color de fondo de un elemento con la clase miClase, utilizamos:

<div class="miClase">Este es un div</div>

En JavaScript:

<script>
    document.querySelector('.miClase').style.backgroundColor = 'yellow';
</script>

Esto hará que el fondo del div sea de color amarillo.

Ejemplo 3: Añadir un nuevo elemento al DOM

Para añadir un nuevo elemento, primero creamos el elemento usando document.createElement(), luego lo agregamos al DOM con appendChild(). Supongamos que queremos añadir un párrafo a un contenedor:

<div id="contenedor"></div>

En JavaScript:

<script>
    var nuevoElemento = document.createElement('p');
    nuevoElemento.textContent = 'Este es un nuevo párrafo.';
    document.getElementById('contenedor').appendChild(nuevoElemento);
</script>

Esto añadirá un nuevo párrafo con el texto especificado dentro del contenedor.

Ejemplo 4: Eliminar un elemento del DOM

Para eliminar un elemento, primero seleccionamos el elemento y luego usamos remove(). Por ejemplo, para eliminar un div con el id miElemento:

<div id="miElemento">Eliminar este div</div>

En JavaScript:

<script>
    var elemento = document.getElementById('miElemento');
    elemento.remove();
</script>

Este código eliminará el div del DOM.

Ejemplo 5: Modificar Atributos de un Elemento

Podemos modificar los atributos de un elemento usando setAttribute() y getAttribute(). Por ejemplo, para cambiar el atributo src de una imagen:

<img id="miImagen" src="imagen1.jpg" alt="Imagen original">

En JavaScript:

<script>
    var imagen = document.getElementById('miImagen');
    imagen.setAttribute('src', 'imagen2.jpg');
    imagen.setAttribute('alt', 'Imagen modificada');
</script>

Esto cambiará la fuente de la imagen y el texto alternativo.