Titolo!


Prima di article

    Dentro article prima del div
    
Questo e' un articolo
    Dentro article dopo il div



    Questo e' un testo in un paragrafo



    Questo e' un testo nel secondo paragrafo



    

        Questo e' un testo nel terzo paragrafo
    
    


    
    




    
Elemento 1
    
Elemento 2
    
Elemento 3

















Cliccami!












// js




// Metodi dell'oggetto document

let elemento = document.getElementById("mio-titolo");

console.log(elemento.innerText);
elemento.innerText =  "Nuovo Titolo!"

//
elemento.classList.add(...["mia-classe", "mia-classe2"]);
// elemento.classList.remove("mia-classe");
//
elemento.style.color = "red";
elemento.style.color = "blue";
elemento.style.fontSize = "3em";
// elemento.style.fontWeight = "bold";
//

// 

console.log(elemento.innerText);

let paragrafo = document.querySelector("p");
// paragrafo.innerText = "Nuovo contenuto del paragrafo!";

// paragrafo.innerHTML = paragrafo.innerHTML + "Nuovo contenuto del paragrafo!";
paragrafo.innerHTML += "Nuovo contenuto del paragrafo!";

let frase = "Ciao!";
let fraseFinale = "";

// Ciclo for per creare una stringa di HTML da inserire in una sola
// volta in un tag qualsiasi

for (let i = 0; i < 5; i++) {
    fraseFinale = fraseFinale + ("
" + frase); // "Ciao!
"
    // 2a ripetizione del ciclo fraseFinale == "Ciao!
Ciao!
"
}

paragrafo.innerHTML += fraseFinale;

paragrafo.innerHTML += "
Nuovo contenuto del paragrafo!";

let contenutoParagrafoInHTML = paragrafo.innerHTML;
console.log(contenutoParagrafoInHTML)

let contenutoParagrafoText = paragrafo.innerText;
console.log(contenutoParagrafoText)
// paragrafo.innerHTML = "Nuovo contenuto del paragrafo!";
// paragrafo.innerText =  "
Nuovo Titolo!"

let mioDiv = document.querySelector("article > div");

// articolo.innerText = "
Ciao
" ;
mioDiv.innerHTML = "
Ciao
" ;

/*

1) document.getElementById("id di un tag")
2) document.querySecelector("nome di un tag")
3) document.querySelectorAll("selettore come per i CSS")
4) document.getElementsByTagName("nome di un tag")
4) .innerText
5) .innerHTML

 */

/*
    p {
        dsdsds
    }
 */
let tuttiParagrafi = document.querySelectorAll("div.classe-uno > p");

// let p1 = tuttiParagrafi[0];
// let p2 = tuttiParagrafi[1];

// p1.innerHTML = "Paragrafo recuperato con querySelectorAll";
// p2.innerHTML = "Secondo paragrafo recuperato con querySelectorAll";

// let i = 900;
for (let i = 0; i < tuttiParagrafi.length; i++) {

    if (i === 0) {
        // lavora
    }
    tuttiParagrafi[i].innerText = "Con loop for - Paragrafo " + i.toString() + " recuperato con querySelectorAll";
}

// console.log(i);

for (let mioSuperElemento of tuttiParagrafi) {
    mioSuperElemento.style.fontSize = "2.em";
}

let paragrafiConUnaClasse = document.getElementsByClassName("classe-uno");

document.getElementById("div-finale").innerText = paragrafiConUnaClasse.length.toString();
// document.getElementsByTagName("p")


let tagNuovo = document.createElement("p");
tagNuovo.innerText = "Nuovo paragrafo che non esisteva";
document.getElementById("div-finale").appendChild(tagNuovo);


let nuovoDiv = document.createElement("div");
nuovoDiv.id = "mio-nuovo-div";

let nuovoParagrafoUno = document.createElement("p");
let nuovoParagrafoDue = document.createElement("p");
let nuovoParagrafoTre = document.createElement("p");

nuovoDiv.appendChild(nuovoParagrafoUno);
nuovoDiv.appendChild(nuovoParagrafoDue);
nuovoDiv.appendChild(nuovoParagrafoTre);
nuovoParagrafoUno.innerText = "Primo paragrafo dal nulla";
nuovoParagrafoDue.innerText = "Secondo paragrafo dal nulla";
nuovoParagrafoTre.innerText = "Terzo paragrafo dal nulla";
// nuovoParagrafoUno.

let mioFooter = document.querySelector("footer");

mioFooter.appendChild(nuovoDiv);

// window.setTimeout(() => {
//     mioFooter.style.visibility = "hidden";
// }, 10000)
//
//
// window.setTimeout(() => {
//     mioFooter.style.visibility = "visible";
// }, 15000)

let ultimoDiv = document.getElementById("ultimo-div");
let mioBottone = document.getElementById("mio-bottone");

mioBottone.addEventListener("mouseover", () => {
    mioFooter.style.visibility = "hidden";
    ultimoDiv.innerHTML = "
Hai cliccato sul pulsante sinistro del mouse!
";
});

mioBottone.addEventListener("mouseleave", () => {
    mioFooter.style.visibility = "visible";
    ultimoDiv.innerHTML = "
Hai lasciato il pulsante sinistro del mouse!
";
});