English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Tutorial di Base JavaScript

Oggetto JavaScript

Funzione JavaScript

JS HTML DOM

BOM del Browser JS

Tutorial di Base AJAX

Manuale di Referenza JavaScript

JS HTML DOM (Modello Oggetto Documento)

Modello Oggetto Documento, noto spesso comeDOM, è una parte importante che rende il sito web interattivo.

Modello Oggetto DocumentoRappresenta un documento HTML visualizzato in una finestra.

È un'interfaccia che permette a JavaScript di gestire il contenuto, la struttura e lo stile del sito web.

HTML DOM (Modello Oggetto Documento)

Dopo aver caricato la pagina web, il browser creerà ilModello Oggetto Documento.

HTML DOMalbero costruito dal modelloOggetti.

Esempio di spiegazione di cosa sia il DOM:

  <html>
  <head>
  <title>Esempio</title>
  </head>  
  <h1>Pagina Esempio</h1>
  <p>Questo è un esempio di pagina</p>
  </html>

La rappresentazione DOM del codice sopra è la seguente:

HTML DOM è lo standard HTMLOggettie modelloInterfaccia di programmazione. Definisce:

  • Gli elementi HTML comeOggetti

  • di tutti gli elementi HTMLProprietà

  • per accedere a tutti gli elementi HTMLMetodi

  • di tutti gli elementi HTMLEventi

In altre parole:HTML DOM è lo standard per ottenere, modificare, aggiungere o eliminare elementi HTML.

DOM e JavaScript

Attraverso il modello oggetto, JavaScript ha ottenuto tutte le funzionalità necessarie per creare HTML dinamico:

  • JavaScript può modificare tutti gli elementi HTML nella pagina

  • JavaScript può modificare tutte le proprietà HTML nella pagina

  • JavaScript può modificare tutti gli stili CSS nella pagina

  • JavaScript può eliminare elementi e attributi HTML esistenti

  • JavaScript può aggiungere nuovi elementi e attributi HTML

  • JavaScript può reagire a tutti gli eventi HTML esistenti nella pagina

  • JavaScript può creare nuovi eventi HTML nella pagina

Cosa imparerai

Nel prossimo capitolo di questa guida, imparerai:

  • Come trovare elementi HTML

  • Come modificare il contenuto degli elementi HTML

  • Come aggiungere e rimuovere elementi HTML

  • Come modificare lo stile degli elementi HTML (CSS)

  • Come aggiungere e rimuovere attributi HTML

  • Come esplorare l'albero DOM