Dopo aver visto e testato le prime funzioni JavaScript vediamo come modificare le pagine pagine web.
Attraverso DOM è possibile trasformare i tag html in “elementi” che possono essere recuperati e modificati attraverso il codice JavaScript.
Partiamo dall’esempio che già conosci aggiungendo qualche piccola modifica:
<!DOCTYPE html>
<html>
<head>
<script>
function primafunzione(){
selectelement = document.getElementById('idElement');
selectelement.innerHTML ="testo modificato";
}
</script>
</head>
<body>
<div id="idElement"> modifica contenuto</div>
<button onclick="primafunzione();">esegui javascript</button>
</body>
</html>
In questo esempio c’è il solito pulsante che richiama la funzione JavaScript; tale funzione esegue inizialmente il primo comando
document.getElementbyId('sezionedamodificare');
Tale comando serve per recuperare l’elemento che ha l’ID indicato; pertanto in questa caso recupererà il tutto il <div> il cui attributo id è valorizzato a ‘sezionedamodificare’. Una volta recuperato tale elemento, lo assegna ad una variabile, nell’esempio la variabile è selectelement. Nella seconda istruzione: selectelement.innerHTML =”testo modificato”; innerHTML serve per assegnare il testo “testo modificato” al contenuto dell’elemento recuperato con la prima istruzione. Eseguendo tale istruzione quindi sarà modificato in tempo reale il codice HTML della pagina web. Il testo che c’era al momento del caricamento della pagina viene pertanto modificato dopo aver premuto il pulsante e richiamato la funzione JavaScript. Magico vero? Con le istruzioni DOM impartite attraverso il codice JavaScript è possibile quindi modificare l’intera pagina in tempo reale. La prima istruzione DOM vista è “innerHTML” che permette di modificare il contenuto dell’elemento recuperato tramite l’istruzione getElementById. Per capire le altre istruzioni DOM devi pensare al documento HTML come se fosse organizzato in una gerarchia, con tag pensati come genitori, altri tag come figli, altri come fratelli (o meglio vicini). Per capire, considera l’esempio mostrato e modifica il testo HTML come di seguito:
<div id="idElement"> <div> Primo figlio </div> <div> Secondo figlio </div> </div> <div> Primo vicino (successivo) </div> <div> Vicino successivo </div>
Il div con l’attributo id contiene al suo interno altri due div. Il primo è considerato genitore, gli altri due sono considerati figli (child).
I div successivi sono considerati vicini (nextSibling).
Una volta recuperato l’elemento con id
“idElement”, alttraverso le istruzioni DOM puoi navigare tra gli elementi della pagina e selezionare quelli di interesse.
Ad esempio con l’istruzione
selectelement.firstElementChild
navighi e recuperi il primo figlio dell’elemento selectelement.
Con l’istruzione:
selectelement.firstElementChild.innerHTML
puoi modificare il contenuto del primo figlio dell’elemento selectelement.
Oltre a modificare il contenuto dei tag puoi modificare anche gli attributi dei tag o creare nuovi elementi e aggiungerli alla pagina web.
Fai tutte le prove possibili per capire bene il funzionamento del DOM e di JavaScript.
Non esitare a lasciare un commento o chiedere informazioni per chiarire i tuoi dubbi!