HTML DOM Attributes

The length Property

Los atributos de la imagen son:

<h1>HTML DOM Attributes</h1>
<h2>The length Property</h2>

<img id="myImg" alt="Flower" src="https://images.ctfassets.net/hrltx12pl8hq/28ECAQiPJZ78hxatLTa7Ts/2f695d869736ae3b0de3e56ceaca3958/free-nature-images.jpg?fit=fill&w=1200&h=630" width="550" height="413">

<p>Los atributos de la imagen son:</p>
<p id="demo"></p>

<script>
const nodeMap = document.getElementById("myImg").attributes;
let text = "";
for (let i = 0; i < nodeMap.length; i++) {
  text += nodeMap[i].name + " = " + nodeMap[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>

Ejemplo de Acceso y Modificación de una Imagen

<h1>Ejemplo de Acceso y Modificación de una Imagen</h1>
<img id="miImagen" src="https://letsenhance.io/static/8f5e523ee6b2479e26ecc91b9c25261e/1015f/MainAfter.jpg" alt="Imagen de ejemplo" style="width: 650px;">
<br>
<div>
    <button id="cambiarTextoAlt">Cambiar Texto Alternativo</button>
    <button id="cambiarImagen">Cambiar Imagen</button>
    <button id="cambiarTamano">Cambiar Tamaño</button>
    <button id="reiniciar">Reiniciar Imagen</button>
</div>
<div class="clean"></div>

<script>
    const imagen = document.getElementById('miImagen');

    // Guardar los valores originales
    const originalSrc = imagen.src;
    const originalAlt = imagen.alt;
    const originalWidth = imagen.style.width;

    // Cambiar el src de la imagen al hacer clic en el botón "Cambiar Imagen"
    document.getElementById('cambiarImagen').addEventListener('click', () => {
        imagen.src = 'https://images.panda.org/assets/images/pages/welcome/orangutan_1600x1000_279157.jpg';
        imagen.alt = 'Nueva imagen de ejemplo';
        alert('La imagen va a cambiar.');
    });

    // Cambiar el tamaño de la imagen al hacer clic en el botón "Cambiar Tamaño"
    document.getElementById('cambiarTamano').addEventListener('click', () => {
        imagen.style.width = '1000px'; // Cambia el estilo directamente
        alert('El tamaño de la imagen ha cambiado.');
    });

    // Cambiar el texto alternativo de la imagen al hacer clic en el botón "Cambiar Texto Alternativo"
    document.getElementById('cambiarTextoAlt').addEventListener('click', () => {
        imagen.alt = 'Este es un nuevo texto alternativo';
        alert('El texto alternativo de la imagen ha sido cambiado.');
    });

    // Reiniciar la imagen al hacer clic en el botón "Reiniciar Imagen"
    document.getElementById('reiniciar').addEventListener('click', () => {
        imagen.src = originalSrc; // Restablece la imagen original
        imagen.alt = originalAlt; // Restablece el texto alternativo original
        imagen.style.width = originalWidth; // Restablece el tamaño original
        alert('La imagen ha sido reiniciada a su estado original.');
    });
</script>