JS DOM MANIPULATION

/* Palaukti kol uzsikraus visas HTML */
document.addEventListener("DOMContentLoaded", function() {
    // Kas vyksta kai užsikrauna HTML
});

/* Kaip pasirinkti HTML Elementa pagal ID */
// Grazina 1 elementa
var button = document.getElementById("mygtukas");


/* Kaip pasirinkit HTML elementa pagal klase  */
var photos = document.getElementsByClassName("nuotrauka");
/* VISADA Grazins elementu masyva */


/* Kaip pakeisti HTML Elemento teksta */
// Jei pasirinkom pagal ID:
button.innerText = "Naujas tekstas";

// Jei pasirinkom pagal klase:
/* Pasieksime 1 mayvo elementa */
photos[0].innerText = "nauajs tekstas";

// Pakeisti visiems elementams teksta:
for(var i = 0; i < photos.length; i++) {
    photos[i].innerText = "Elementas nr: " + i;
}

/* Prideti elementui pasirinktam pagal ID klase */
button.classList.add("specialClass");
// Pasirinkta pagal klase
for(var i; i < photos.length; i++) {
    photos[i].classList.add("specialClass");
}

/* Jeigu norim atlikti veiksma TIK tada, kai paspausim mygtuka */
// 1. I koki objekta kreipames (documet, div, window ir tt)
// 2. Pasako kad vykdyti, kazka, kai ivyksta nurodytas ivykis
// 3. Nurdomas ivykis (DOMContentLoaded, click, hover ir tt);
// 4. Ka daryti, kai kazkas ivyko.

button.addEventListener("click", function() {
    // Kas vyksta kai paspaudziamas mygtukas
    button.classList.toggle("specialClass");

    // VIsoms nuotraukoms prideti klase
    for(var i= 0; i < photos.length; i++) {
        photos[i].classList.add("specialClass");
    }
});

/*
Jei norim atlikti veiksma,
kai paspausime bet kuri elementa su klase
*/
for(var i = 0; i < photos.length; i++)
{
    photos[i].addEventListener("click", function()
    {
        // Kazkas vyks kai paspausi nuotrauka
        // VIsoms nuotraukoms prideti klase
        for(var j = 0; j < photos.length; j++)
        {
            photos[j].classList.add("specialClass");
        }
    });
}



/* Kazkas ivyksta kai uzvedu pele ant mygtuko */
button.addEventListener("mouseover", function() {
    alert("labas");
    for(var j = 0; j < photos.length; j++) {
            photos[j].classList.add("specialClass");
    }
});

/*
Jei norim atlikti veiksma,
kai paspausime bet kuri elementa su klase
*/
for(var i = 0; i < photos.length; i++)
{
    photos[i].addEventListener("click", function()
    {
        // Kazkas vyks kai paspausi nuotrauka
        this.classList.add("specialClass");
    });
}


/* PAPILDOMOS KOMANDOS*/

var paragrafai = document.getElementsByTagName("p");
var manoElementai = document.querySelectorAll('#button');