<!-- W strukturze HTML mamy utworzone elementy 
         2 element ma przypisany identyfikator id='c1' 
         elementy 3-10 mają nadaną klasę class='b1' -->

            <div>1</div>
            <div id="c1">2</div>
            <div class="b1">3</div>
            <div class="b1">4</div>
            <div class="b1">5</div>
            <div class="b1">6</div>
            <div class="b1">7</div>
            <div class="b1">8</div>
            <div class="b1">9</div>
            <div class="b1">10</div>

        <script>

        //Tworzenie uchwytów do elemntów naszej struktury HTML

        //1. odwołanie do elementu po tagu <div>
        //metoda getElementsByTagName()

        var div1 = document.getElementsByTagName("div")[0];
        div1.style.backgroundColor = "red";
        div1.style.fontSize = "30px";
        div1.style.padding = "10px";

        //metoda querySelector()
        let div1b = document.querySelector("div");
        div1b.innerHTML = "To jest przykładowy tekst";



        //2. odwołanie do elementu po identyfikatorze id='c1'
        // metoda getElementById()
        var div2 = document.getElementById("c1");
        div2.style.backgroundColor = "green";
        div2.style.fontSize = "30px";
        div2.style.padding = "10px";
        div2.style.color = "white";

        //metoda querySelector()
        const div2b = document.querySelector("#c1");
        div2b.innerHTML = `

            <input type="text" value="Test">
                
        `;



        //3. odwołanie do elementu po zdefiniowanej klasie class='b1'


        //tworzenie uchwytu pojedyńczego elementu w klasie
        // metoda - getElementsByClassName()

        var div3 = document.getElementsByClassName("b1")[0];
        div3.style.textDecoration = "underline";

        //metoda querySelector()

        let div3a = document.querySelector(".b1");
        div3a.innerHTML = "Przykładowy tekst";


        //4. tworzenie uchwytów do wielu elementów na raz

        //metoda document.querySelectorAll()

        const divs = document.querySelectorAll(".b1");

        for(let div of divs ){

            div.style.backgroundColor = "yellow";
            div.style.fontSize = "40px";
            div.style.padding = "10px";
            div.style.margin = "10px 0";


        }


               
        </script>