HTML DOM (Document Object Model)

Quando una pagina web viene caricata, il browser crea il DOM della pagina. Costruisce cioè una mappa degli oggetti di cui è composta una pagina web.

Attraverso il DOM, Javascript può accedere ad ogni elemento di un documento HTML: può aggiungere, cambiare e rimuovere elementi ed attributi HTML, ma può anche cambiare gli stili definiti tramite CSS.

Definiamo meglio metodi e proprietà:

  • I metodi HTML DOM sono azioni che si possono compiere su elementi HTML;
  • Le proprietà HTML DOM sono i valori che è possibile impostare, cambiare o rimuovere.

Il DOM è accessibile da Javascript e da tanti altri linguaggi di programmazione. Nel DOM, tutti gli elementi HTML vengono trattati come oggetti.

Il metodo getElementById e il metodo getElementsByClassName

Il modo più comune di accedere agli elementi HTML consiste nell’utilizzo del metodo getElementById. Permette di recuperare l’elemento definito in maniera unica dall’ID assegnato in HTML. Si utilizza in questo modo:

document.getElementById("id elemento")

Mentre se vogliamo accedere ad un elemento tramite la classe che abbiamo assegnato in HTML (univoca, sempre univoca!) usiamo il metodo:

document.getElementsByClassName("Classe elemento")

 

La proprietà innerHTML

Il modo più semplice di recuperare o modificare il contenuto di un elemento è con l’utilizzo della propietà innerHTML.

Vediamo subito alcuni esempi pratici.

Creo un container con un pulsante e una frase che cambierà alla pressione del pulsante.

HTML

<div class="container">
  <button type="button" class="btn btn-primary">Cambia Testo!</button>

Testo da Cambiare!</div>

CSS

p {
  font-size: 40px;
  margin-top: 20px
  }

Javascript

$(document).ready(function() {
  $(".btn").on("click", function () {
    $("p").text("Testo Cambiato!");
    });
})

Questo esperimento parte con

$(document).ready(function(){}

che utilizzo per attendere il caricamento del DOM.
Quando è caricato, definisco la funzione del pulsante.

$(".btn").on("click", function(){}

Definisco poi il passo successivo, cioè la modifica del contenuto del paragrafo p con un testo a mia scelta:

$("p").text("Testo Cambiato!");

Ora vediamo l’utilizzo del metodo getElementById e della proprietà innerHTML.

HTML

<div class="container">
  <button type="button" class="btn btn-primary">Cambia Testo</button>

Cambia Testo!</div>

CSS

p {
  margin-top: 20px;
  font-size: 40px;
  }

Javascript

$(document).ready(function(){
  $(".btn").on("click", function(){
  document.getElementById("ctext").innerHTML="Testo Cambiato!";
  });
})

In alcuni casi, per semplificare possiamo suddividere la

document.getElementById("ctext").innerHTML="Testo Cambiato!";

in una forma che comporta la definizione del metodo getElementById come variabile:

var a = getElementById("ctext");
a.innerHTML="Testo Cambiato!";

Ora vediamo come modificare le proprietà CSS. Partiamo da un esercizio semplice. Creiamo un rettangolo giallo e lo trasformiamo, modificando le proprietà CSS, in un quadrato verde.

HTML

<div class="container">
  <button type="button" class="btn btn-primary">Cambia Forma</button>
<div id="forma"></div>
</div>

CSS

.btn, #forma {
  margin-top: 20px
  }
#forma {
  width: 200px;
  height: 80px;
  border: 1px solid;
  background: yellow;
  }

Javascript

$(document).ready(function() {
  $(".btn").on("click", function() {
    $("#forma").css({
"width": "80px", "height": "80px", "border": "1px solid", "background": "lightgreen"});
  });
})

L’esempio si trova qui.

Allo stesso modo possiamo creare forme, non solo cambiarne la sostanza: per farlo basta eliminare la parte CSS della classe #forma e modificare la parte Javascript in questo modo:

$(document).ready(function() {
  $(".btn").on("click", function() {
    $("#forma").css({
      "width": "50px",
      "height": "50px",
      "border": "3px solid",
      "border-color": "red",
      "border-radius": "50%",
    });
  });
})

L’esempio sopra riportato si trova qui

//jsfiddle.net/beatenbones/2Ls38qaf/1/embedded/

Un pensiero su “HTML DOM (Document Object Model)

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo di WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione /  Modifica )

Google photo

Stai commentando usando il tuo account Google. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

Connessione a %s...

Questo sito utilizza Akismet per ridurre lo spam. Scopri come vengono elaborati i dati derivati dai commenti.