JavaScript - Document Object Model o DOM

Ogni pagina web risiede all'interno di una finestra del browser che può essere considerata come un oggetto.

Un oggetto Document rappresenta il documento HTML visualizzato in quella finestra. L'oggetto Document ha varie proprietà che fanno riferimento ad altri oggetti che consentono l'accesso e la modifica del contenuto del documento.

Il modo in cui si accede e si modifica il contenuto di un documento è chiamato Document Object Model, o DOM. Gli oggetti sono organizzati in una gerarchia. Questa struttura gerarchica si applica all'organizzazione degli oggetti in un documento Web.

  • Window object- In cima alla gerarchia. È l'elemento più esterno della gerarchia degli oggetti.

  • Document object- Ogni documento HTML che viene caricato in una finestra diventa un oggetto documento. Il documento contiene il contenuto della pagina.

  • Form object - Tutto ciò che è racchiuso nei tag <form> ... </form> imposta l'oggetto form.

  • Form control elements - L'oggetto modulo contiene tutti gli elementi definiti per quell'oggetto come campi di testo, pulsanti, pulsanti di opzione e caselle di controllo.

Ecco una semplice gerarchia di alcuni oggetti importanti:

Esistono diversi DOM esistenti. Le sezioni seguenti spiegano in dettaglio ciascuno di questi DOM e descrivono come utilizzarli per accedere e modificare il contenuto del documento.

  • The Legacy DOM - Questo è il modello che è stato introdotto nelle prime versioni del linguaggio JavaScript. È ben supportato da tutti i browser, ma consente l'accesso solo a determinate parti chiave dei documenti, come moduli, elementi di modulo e immagini.

  • Il W3C DOM - Questo modello a oggetti del documento consente l'accesso e la modifica di tutto il contenuto del documento ed è standardizzato dal World Wide Web Consortium (W3C). Questo modello è supportato da quasi tutti i browser moderni.

  • DOM IE4 - Questo modello di oggetti documento è stato introdotto nella versione 4 del browser Internet Explorer di Microsoft. IE 5 e le versioni successive includono il supporto per la maggior parte delle funzionalità DOM W3C di base.

Compatibilità DOM

Se si desidera scrivere uno script con la flessibilità di utilizzare W3C DOM o IE 4 DOM a seconda della loro disponibilità, è possibile utilizzare un approccio di test di capacità che verifica prima l'esistenza di un metodo o di una proprietà per determinare se il browser ha la capacità che desideri. Ad esempio:

if (document.getElementById) {
   // If the W3C method exists, use it
} else if (document.all) {
   // If the all[] array exists, use it
} else {
   // Otherwise use the legacy DOM
}