Javascript Lezione 52

<!DOCTYPE html>
<html lang="EN">
<head>
    <meta charset="utf-8">
    <title>DOM</title>

    <link rel="stylesheet" href="style.css">

    <style>
        img {width: 50px; height: 50px;}
        td {border: 1px solid black;}
        .testoRosso {color: red;}
        .sfondoGiallo {background-color: yellow;}
        .font35 {font-size: 35px;}
        .font25 {font-size: 25px;}
        span {font-size: 25px;}
    </style>

</head>
<body>
    <div id='div1'>
        <p id="p1" class="testoRosso sfondoGiallo">primo paragrafo</p>
        <p id="p2">secondo paragrafo
                   <img id="img1" src="teatro1.png">
                   <img id="img2" src="teatro2.png">
        </p>
    </div>

    <div id='div2'>
        <a href="https://www.bbc.com">sito bbc</a>
    </div>

    Londra <input class="c1" type="checkbox" name="capitali" id="cb1">
    Parigi <input class="c1" type="checkbox" name="capitali" id="cb2">
    Roma   <input type="checkbox" name="capitali" id="cb3">
    Madrid <input type="checkbox" name="capitali" id="cb4"> <br>

    Conferma operazione critica: <input type="text" name="conferma" id="conferma" value="NO">
    <img id='gatto' src="../drop_down_form/gatto.jpg" tipoImmagine="natura, animali">

     <!-- innerText   innerHTML  textContent -->
     <br>
     <span id="span1">inizio <span style="display: normal;">centrale</span>fine </span>

     <input type="text" id="descrizione" value="valore_iniziale">

    <script>
        const immagine = document.getElementById('gatto');

        console.log(immagine.hasAttribute('tipoImmagine'));
        immagine.removeAttribute('tipoImmagine');
        console.log(immagine.hasAttribute('tipoImmagine'));

        const par1 = document.getElementById('p1');
        //par1.className+= " font35";

        par1.classList.add('font35');
        par1.classList.remove('testoRosso');
        par1.classList.replace('font35', 'font25');
        console.log(par1.classList.contains('font25'));
        par1.classList.toggle('font25');
        par1.classList.toggle('font25');

        const span = document.getElementById('span1');
        console.log("innerHTML: "+span.innerHTML);
        //span.innerHTML = "<img src='../drop_down_form/gatto.jpg'>";
        //span.innerText = "<img src='../drop_down_form/gatto.jpg'>";
        console.log("innerText: "+span.innerText);
        console.log("textContent: "+span.textContent);

        const input = document.getElementById('descrizione');
        input.value ="valore_modificato";
        console.log(input.getAttribute('value'));

    </script>
</body>
</html>