HTML and CSS Reference
In-Depth Information
tElementById
, dell'oggetto
document
, passandogli in input la stringa "
text
", come
mostrato nel prossimo esempio.
Esempio 8.1
var obj = document.getElementById("text");
Recuperare un oggetto dato il suo attributo
id
è molto semplice. Tuttavia ci sono situazioni
in cui vogliamo recuperare più oggetti e in cui la ricerca non deve avvenire per nome.
Supponiamo, per esempio, di voler recuperare tutti i tag
input
di una pagina per ese-
guire un controllo di obbligatorietà. Se abbiamo 20 controlli
input
nella pagina, dovrem-
mo utilizzare per 20 volte il metodo
getElementById
. Questo approccio è, come mi-
nimo, scomodo e soggetto a errori. Per semplificare il codice possiamo usare il metodo
getElementsByTagName
dell'oggetto
document
passando in input il tipo di tag che
vogliamo recuperare. Per esempio, per recuperare tutti gli input di una pagina, dovremmo
scrivere il seguente codice.
Esempio 8.2
var objs = document.getElementsByTagName("input");
Il metodo
getElementsByTagName
è molto semplice da utilizzare, così come il meto-
do
getElementById
. Oltre a questi due, esiste anche il metodo per ricercare gli ogget-
ti tramite la loro classe CSS:
getElementsByClassName
. Il nome del metodo è auto
esplicativo; nel nostro caso possiamo usare questo metodo per recuperare tutti i tag che
hanno la classe CSS
text
, come viene mostrato nel prossimo esempio.
Esempio 8.3
var obj = document.getElementsByClassName("text");
Tutti i metodi che abbiamo esaminato finora offrono una variante molto interessante, cioè
permettono di recuperare gli oggetti non solo cercando all'interno dell'intero DOM, ma an-
che all'interno di un solo sottoinsieme. Per esempio, potremmo prima ricercare il tag
div
con id
mainText
e poi cercare i tag
p
al suo interno. Per fare questo, dobbiamo usare il
metodo
getElementsByTagName
non sull'oggetto
document
ma sull'oggetto resti-
tuito dal metodo
getElementById
. Nel seguente codice mettiamo in pratica l'esempio
appena fatto.
