Document Object Model

Il DOM è uno standard w3c attraverso la quale la struttura di un documento è rappresentato sotto forma di un modello orientato agli oggetti. Esempio di struttura DOM su un documento HTML:

  • html
    • head
      • title
        • titolo
      • body
        • tag
          • tag
        • tag

Attraverso javascript è possibile manipolare il DOM. L’oggetto base è document e rappresenta la radice del documento, il genitore di tutti gli altri elementi della pagina web.

Alcuni metodi dell’oggetto document sono:

  • getElementById() – identifica un solo elemento della pagina tramite l’attributo ID;
  • getElementByTagName() – identifica un set di elementi della pagina attraverso uno specifico tag;
  • getElementByClassName() – identifica un set di elementi della pagina attraverso una specifica classe;

Tramite la proprietà innerHTML possiamo scrivere codice HTML all’interno di un qualsiasi nodo della pagine.

var testo = document.getElementById(‘nota’);
testo.innerHTML = ‘qua scrivi il codice <b>HTML</b>’;

Ogni attributo si trasforma in oggetto che possiamo manipolare a nostro piacimento.

document.getElementById(‘nota’).style.color = ‘2020FF’;

Tramite il DOM possiamo anche assegnare un evento ad un elemento della pagina, possiamo creare degli event listener e possiamo associare diversi event handler.

Possiamo aggiungere un nuovo elemento che viene creato tramite createElement(), questo elemento è vuoto. Con il metodo appendChild() posizioniamo l’elemento in fondo, se invece vogliamo inserire il nuovo elemento in un determinato punto utilizziamo insertBefore(); ed infine  sostituire un elemento con il nuovo replaceChild().

Possiamo eliminare un elemento del DOM tramite removeChild().

Riassumiamo le proprietà per muoversi all’interno del documento:

  • parentNode – accedere al nodo genitore dell’oggetto corrente;
  • childNodes[indice] – accedere ad un determinato nodo figlio, l’indice parte da 0;
  • firstChild – accedere al primo nodo dell’oggetto corrente;
  • lastChild – accedere all’ultimo nodo dell’oggetto corrente;
  • nextSibling – accedere al nodo successivo al nodo genitore;
  • previousSibling – accedere al nodo precedente al nodo genitore;

Per accedere alla radice della nostra pagina HTML possiamo utilizzare la proprietà documentElement dell’oggetto document, se invece vogliamo selezionare solo il corpo del documento utilizziamo la proprietà body.

Please follow and like us:

Lascia un commento