HTML and CSS Reference
In-Depth Information
il risultato ottenuto dagli esempi 2 e 4 è equivalente a quello ottenuto invocando
ge-
tElementsByTagName
;
il risultato ottenuto dall'esempio 3 è equivalente a quello ottenuto invocando
getE-
lementsByClassName
;
il risultato ottenuto dall'esempio 5 può essere ottenuto chiamando prima
getEle-
mentsByTagName
per recuperare tutti i tag
div
, poi ciclando sui tag ottenuti e
invocando nuovamente
getElementsByTagName
su ognuno di essi. Non mo-
streremo questo codice, ma risulta chiaro come il codice da scrivere sia maggiore
rispetto all'esempio 5;
il risultato ottenuto dall'esempio 6 può essere ottenuto chiamando prima
getEle-
mentsByTagName
, per recuperare tutti i tag
div
, poi ciclando sui tag ottenuti e,
per ognuno di essi, ciclare sui nodi figli (tramite la proprietà
childNodes
), pren-
dendo solo quelli che rappresentano un tag
p
). In questo caso il codice da scrivere
è ancora maggiore rispetto a quello necessario nell'esempio 5.
Questi esempi mostrano chiaramente che la versatilità di
querySelector
e
querySe-
lectorAll
ci permette di ottenere ciò che vogliamo con una quantità di codice minima.
Una volta recuperati dal DOM gli oggetti che ci servono, possiamo modificarli come
vogliamo. Per esempio, possiamo disabilitare il pulsante di conferma finché tutti i check-
box non sono selezionati oppure mostrare un tip all'utente quando imposta il focus su una
textbox.
Supponiamo di dover realizzare una form di login per gli utenti del nostro sito. Uno dei
requisiti è che il tasto login non deve essere abilitato finché username e password non sono
inserite. Il codice HTML della pagina è il seguente.
Esempio 8.7
<html>
<head>
<title></title>
</head>
<body>
<form action="">
