▷ Duda sobre un Ejercicio de Javascript de Dom: SOLUCIONADO

Profundizar en el ejercicio de Javascript y Dom

El manejo del DOM (Document Object Model) puede ser un tema crítico en Javascript, pero no te preocupes, estamos aquí para ayudarte a comprender este desafiante ejercicio.

    document.querySelector("#button").addEventListener("click", function() {
        alert("Botón presionado");
    });

Diseccionando el código

Antes de adentrarnos en el problema principal, es vital entender cada pieza de este código de javascript. En la primera línea estamos seleccionando un elemento usando su identificador desde nuestro archivo HTML…

…

    function changeColor(newColor) {
        var elem = document.getElementById("para");
        elem.style.color = newColor; 
    }

Implementación de funciones de JavaScript

Las funciones de Javascript como la que acabas de ver, pueden ser extremadamente útiles para manipular los elementos del DOM en nuestro sitio web. Esta específicamente cambiará el color del texto en el párrafo con el id “para”…

…

    var btn = document.querySelector('button');
    btn.onclick = function() {
        var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
        document.body.style.backgroundColor = rndCol;
    }

Añadiendo interactividad con JavaScript

La interactividad es una parte esencial de cualquier página web y DOM te permitirá añadirla de manera efectiva a tu sitio. Por ejemplo, en este código, al hacer clic en el botón, se cambiará el color de fondo del cuerpo de la página web

…

    window.onload = function () {
        var element = document.getElementById('myDiv');
        element.innerHTML = 'New Content';
    }

Manejando eventos de carga con Javascript

Los eventos de carga son otro aspecto fundamental con el que debes familiarizarte para comprender plenamente cómo funciona Dom. En este ejemplo, cambiamos el contenido de ‘myDiv’ en nuestro archivo HTML a ‘New content’ tan pronto como nuestra página web termine de cargar…

…