Cos'è il DOM HTML?
L' HTML DOM è un modello a oggetti per HTML . Definisce:
- Elementi HTML come oggetti
- Proprietà per tutti gli elementi HTML
- Metodi per tutti gli elementi HTML
- Eventi per tutti gli elementi HTML
L' HTML DOM è un'API (Programming Interface) per JavaScript :
- JavaScript può aggiungere/cambiare/rimuovere elementi HTML
- JavaScript può aggiungere/modificare/rimuovere attributi HTML
- JavaScript può aggiungere/cambiare/rimuovere stili CSS
- JavaScript può reagire agli eventi HTML
- JavaScript può aggiungere/modificare/rimuovere eventi HTML
Il DOM HTML (Document Object Model)
Quando viene caricata una pagina Web, il browser crea un modello di oggetto documento della pagina.
Il modello HTML DOM è costruito come un albero di Oggetti :
L'albero degli oggetti del DOM HTML
Trovare elementi HTML
Quando vuoi accedere agli elementi HTML con JavaScript, devi prima trovare gli elementi.
Ci sono un paio di modi per farlo:
- Trovare elementi HTML per id
- Trovare elementi HTML in base al nome del tag
- Trovare elementi HTML in base al nome della classe
- Trovare elementi HTML dai selettori CSS
- Trovare elementi HTML da raccolte di oggetti HTML
Trovare l'elemento HTML per ID
Il modo più semplice per trovare un elemento HTML nel DOM è utilizzare l'ID elemento.
Questo esempio trova l'elemento con id="intro":
Esempio
var myElement = document.getElementById("intro");
Se l'elemento viene trovato, il metodo restituirà l'elemento come oggetto (in myElement).
Se l'elemento non viene trovato, myElement conterrà null.
Trovare elementi HTML in base al nome del tag
Questo esempio trova tutti gli elementi <p>:
Esempio
var x = document.getElementsByTagName("p");
Questo esempio trova l'elemento con id="main", quindi trova tutti gli elementi <p> all'interno di "main":
Esempio
var x = document.getElementById("main");
var y = x.getElementsByTagName("p");
Trovare elementi HTML in base al nome della classe
Se vuoi trovare tutti gli elementi HTML con lo stesso nome di classe, usa getElementsByClassName().
Questo esempio restituisce un elenco di tutti gli elementi con class="intro".
Esempio
var x = document.getElementsByClassName("intro");
La ricerca di elementi in base al nome della classe non funziona in Internet Explorer 8 e versioni precedenti.
Trovare elementi HTML dai selettori CSS
Se vuoi trovare tutti gli elementi HTML che corrispondono a un selettore CSS specificato (id, nomi di classi, tipi, attributi, valori di attributi, ecc.), usa il metodo querySelectorAll().
Questo esempio restituisce un elenco di tutti gli elementi <p> con class="intro".
Esempio
var x = document.querySelectorAll("p.intro");
Il metodo querySelectorAll() non funziona in Internet Explorer 8 e versioni precedenti.
Trovare elementi HTML da raccolte di oggetti HTML
Sono inoltre accessibili raccolte di oggetti HTML:
Esercitazione HTML DOM
Tutorial HTMLDOM completo
Questa è stata una breve introduzione a HTMLDOM.
Per un tutorial HTMLDOM completo vai a W3Schools HTMLDOM Tutorial .