Javascript Lezione 50

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

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

    <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>

    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">


    <script>

        //RESTITUISCONO UN INSIEME DI OGGETTI
        // let capitali = document.getElementsByName('capitali');
        // capitali = Array.from(capitali);

        //const capitali = document.getElementsByTagName('input');
        //const capitali = document.querySelectorAll('[name="capitali"]');
        const capitali = document.getElementsByClassName('c1');


        // console.log(typeof capitali); //object, nodeList
        // console.log(capitali[0].id);

        let cont=5;
        for (const capitale of capitali)
        {
            capitale.style.marginRight='40px';

            //aggiungendo un checkbox la collezione
            //nodeList viene aggiornata

            let newCheckBox = document.createElement('input');
            newCheckBox.type = 'checkbox';
            newCheckBox.id = 'cb' + cont++;
            newCheckBox.name='capitali';
            newCheckBox.classList="c1";
            document.body.appendChild(newCheckBox);
            if (cont>40) break;
        }


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