Manipulación del DOM con JavaScript

INICIO

1. Seleccionar un elemento por ID

Se usa getElementById() para seleccionar un único elemento basado en su atributo id.

Este es un párrafo.


<button onclick="cambiarTexto()">Cambiar Texto</button>
<p id="parrafo">Este es un párrafo.</p>

<script>
function cambiarTexto() {
    let elemento = document.getElementById("parrafo");
    elemento.innerHTML = "El texto ha sido cambiado.";
}
</script>

2. Seleccionar múltiples elementos por clase

Se usa getElementsByClassName() para seleccionar todos los elementos que comparten la misma clase.

Mensaje 1

Mensaje 2

Mensaje 3


<button onclick="cambiarMensajes()">Cambiar Mensajes</button>
<p class="mensaje">Mensaje 1</p>
<p class="mensaje">Mensaje 2</p>
<p class="mensaje">Mensaje 3</p>

<script>
function cambiarMensajes() {
    let elementos = document.getElementsByClassName("mensaje");
    for (let i = 0; i < elementos.length; i++) {
        elementos[i].innerHTML = "El mensaje ha sido actualizado.";
    }
}
</script>

3. Seleccionar todos los elementos por etiqueta

Se usa getElementsByTagName() para seleccionar todos los elementos con una misma etiqueta.


<button onclick="resaltarElementos()">Resaltar Elementos</button>
<ul>
    <li>Elemento 1</li>
    <li>Elemento 2</li>
    <li>Elemento 3</li>
</ul>

<script>
function resaltarElementos() {
    let elementos = document.getElementsByTagName("li");
    for (let i = 0; i < elementos.length; i++) {
        elementos[i].style.color = "red";
    }
}
</script>

4. Seleccionar el primer elemento que coincide con un selector CSS

Se usa querySelector() para seleccionar el primer elemento que coincide con un selector CSS.

Primera caja
Segunda caja

<button onclick="cambiarPrimeraCaja()">Cambiar Primera Caja</button>
<div class="caja">Primera caja</div>
<div class="caja">Segunda caja</div>

<script>
function cambiarPrimeraCaja() {
    let elemento = document.querySelector(".caja");
    elemento.style.backgroundColor = "yellow";
}
</script>

5. Seleccionar todos los elementos que coinciden con un selector CSS

Se usa querySelectorAll() para seleccionar todos los elementos que coinciden con un selector CSS.

Caja 1
Caja 2
Caja 3

<button onclick="cambiarTodasLasCajas()">Cambiar Todas las Cajas</button>
<div class="caja">Caja 1</div>
<div class="caja">Caja 2</div>
<div class="caja">Caja 3</div>

<script>
function cambiarTodasLasCajas() {
    let elementos = document.querySelectorAll(".caja");
    elementos.forEach(function(elemento) {
        elemento.style.border = "2px solid blue";
    });
}
</script>