Javascript Lezione 48

<!DOCTYPE html>
<html lang="IT-it">
<head>
    <title>DOM1</title>
    <style>
        img {width: 50px; height: 50px;}
    </style>
</head>
<body>
    <div id='div1'>
        <p id="p1">primo paragrafo</p>
        <p id="p2">secondo paragrafo
                   <img id="img1" src="teatro.png" alt="Locandina Teatro">
        </p>
    </div>

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

    <script>
        //RESTITUISCONO UN SOLO OGGETTO
        //getElementById('questo_id') -> oggetto con quell'id
        //querySelector('pattern_ricerca_alla_CSS') -> il primo che soddisfa il pattern

        //testo rosso e dimensione carattere 35px al testo del paragrafo id='p1'

        const par_p1 = document.getElementById('p1');

        //if (par_p1!==null){
        if (!par_p1){ // "", '', undefined, false, NaN
            //gestione errore
        }
        else
        {
            //  .style agisce  sugli stili IN LINEA
            par_p1.style.fontSize = '2em';
            par_p1.style.color = '#0000ff';
        }

        const img1 = document.getElementById('img1');

        //getComputedStyle tiene conto di TUTTI gli stili
        const stili_img1 = window.getComputedStyle(img1);

        const widthAttuale = parseInt(stili_img1.width); //da 50px al numero 50
        const heightAttuale = parseInt(stili_img1.height);

        img1.style.width = widthAttuale*2+"px";
        img1.style.height = heightAttuale*2+"px";


        //RESTITUISCONO UN INSIEME DI OGGETTI
        //getElementsByName('questo_name')
        //getElementsByTagName('questo_tag')
        //getElementsByClassName('questa_classe')
        //querySelectorAll('pattern_ricerca_alla_CSS')

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