to Top Page
Hot Web Guide
GUESTBOOK (Libro degli ospiti)
Consiglia il Sito ad un amico
BOOKMARK (Aggiungi ai Preferiti)
-
... / Guida Javascript / L'oggetto document e il DOM

L'oggetto document e il DOM in Javascript

Mediante Javascript è possibile manipolare il DOM (Document Object Model) della pagina e cioè ogni elemento della pagina viene rappresentato come un oggetto il quale può essere manipolato attraverso metodi e proprietà. L'oggetto per la manipolazione del DOM è document (cioè la pagina web). Ad esempio per accedere alla radice della nostra pagina HTML contrassegnata dai tag <html>, possiamo utilizzare la proprietà documentElement dell'oggetto document, invece per selezionare solo il corpo del documento possiamo utilizzare semplicemente la proprietà body.

Proprietà dell'oggetto document:
  • document.domain - Restituisce il nome a dominio della pagina
  • document.documentElement - Restituisce l'elemento <html>
  • document.body - Restituisce l'elemento <body>
  • document.title - Restituisce l'elemento <title>
  • document.forms - Restituisce tutti gli elementi <form>
  • document.images - Restituisce tutti gli elementi <img>
  • document.links - Restituisce tutti gli elementi <area> e <a> che hanno un attibuto href
  • document.anchors - Restituisce tutti gli elementi <a> che hanno un attributo name (ancora)
  • document.referrer - Restituisce le URI dei referrer
  • document.URL - Restituisce l'URL completa del documento
  • document.cookie - Restituisce i cookie del documento

Attraverso l'oggetto document è possibile accedere a tutti gli elementi della pagina mediante i seguenti metodi:
  • document.getElementById() - identifica un solo elemento della pagina attraverso l'attributo ID (univoco)
  • document.getElementByTagName() - identifica tuti gli elementi della pagina attraverso l'indicazione dello specifico tag
  • document.getElementByClassName() - identifica tutti gli elementi della pagina attraverso l'indicazione di una specifica classe

Con la proprietà innerHTML si può scrivere codice HTML all'interno di un qualsiasi nodo della pagina. L'attributo style di un oggetto element può diventare a sua volta un oggetto e manipolato attraverso una serie di proprietà corrispondenti ai fogli di stile.

Metodi per cambiare gli elementi del DOM:
  • element.innerHTML="nuovo html" content - Cambia il contenuto all'interno di un elemento HTML
  • element.attribute="nuovo valore" - Cambia il valore di un attributo di un elemento HTML
  • element.setAttribute(attribute, value) - Cambia il valore di un attributo di un elemento HTML
  • element.style.property="nuovo stile" - Cambia lo stile di un elemento HTML

Per aggiungere un nuovo elemento nella pagina, ovviamente, vuoto, è necessario prima crearlo e poi appenderlo al nodo nel quale o si desidera inserire. Per creare un nuovo elemento nel DOM si utilizza il metodo createElement() specificando, come attributo, che tipo di elemento si desidera creare.

Metodi per la gestione degli emelenti del DOM:
  • document.createElement("elemento") - Crea un nuvo elemento HTML nella pagina
  • document.removeChild("elemento") - elimina un elemento HTML dal DOM
  • document.appendChild("elemento") - aggiunge un nuovo elemento HTML che viene posizionato in fondo all'elemento selezionato
  • document.insertBefore("elemento") - inserisce un nuovo elemento in un punto ben preciso
  • document.replaceChild("elemento") - sostituisce un elemento HTML
  • document.write(text) - stampa a video

Proprietà degli elementi del DOM:
  • parentNode - accede al nodo genitore dell'oggetto element corrente
  • childNodes[indice] - consente di accedere ad un determinato nodo specificando l'indice numerico (la numerazione degli indici parte da 0)
  • firstChild e lastChild - accede al primo nodo e all'ultimo elemento figlio dell'oggetto element corrente
  • nextSibling e previousSibling - consentono di accedere al nodo precedente e quello successivo
Come ritieni i contenuti del Sito Web ?
... dai il tuo giudizio!
Giudizio Utenti: 4,3 (Eccellente)
200 voti
Eccellente 38,1% (77)
Buono 56,9% (115)
Sufficente 3,5% (7)
Mediocre 0,5% (1)
Scarso 1% (2)