Le proprietà di navigazione DOM sono ottime quando gli elementi sono vicini luno allaltro. E se non lo fossero? Come ottenere un elemento arbitrario della pagina?
Esistono metodi di ricerca aggiuntivi per questo.
document.getElementById o semplicemente id
Se un elemento ha il id, possiamo ottenere lelemento utilizzando il metodo document.getElementById(id), indipendentemente da dove si trova.
Ad esempio :
Inoltre, esiste una variabile globale denominata id che fa riferimento allelemento:
… Questo a meno che non dichiariamo una variabile JavaScript con il stesso nome, quindi ha la precedenza:
Questo comportamento è descritto in le specifiche, quindi è una specie di standard. Ma è supportato principalmente per compatibilità.
Il browser cerca di aiutarci mescolando spazi dei nomi di JS e DOM. Va bene per script semplici, incorporati in HTML, ma in genere non è una buona cosa. Potrebbero esserci conflitti di denominazione. Inoltre, quando si legge il codice JS e non si ha HTML in vista, non è ovvio da dove provenga la variabile.
Qui nel tutorial usiamo id per fare riferimento direttamente a un elemento per brevità, quando è ovvio da dove proviene lelemento.
Nella vita reale document.getElementById è il metodo preferito.
id deve essere univoco id deve essere unico. Può esserci un solo elemento nel documento con il dato id.
Se sono presenti più elementi con lo stesso id, quindi il comportamento dei metodi che lo utilizzano è imprevedibile, ad es document.getElementById può restituire uno qualsiasi di questi elementi in modo casuale. Quindi attieniti alla regola e mantieni id unico.
document.getElementById, non anyElem.getElementById Il metodo getElementById può essere chiamato solo su document oggetto. Cerca il dato id nellintero documento.
querySelectorAll
Di gran lunga, la maggior parte metodo versatile, elem.querySelectorAll(css) restituisce tutti gli elementi allinterno di elem corrispondenti al selettore CSS specificato.
Qui cerchiamo tutti <li> elementi che sono gli ultimi figli:
Questo metodo è davvero potente, perché può essere utilizzato qualsiasi selettore CSS.
Pseudo-classi nel selettore CSS come :hover e :active sono anche supportato. Ad esempio, document.querySelectorAll(":hover") restituirà la raccolta con gli elementi su cui si trova ora il puntatore (in ordine di nidificazione: dal <html> più esterno al più uno annidato).
querySelector
La chiamata a elem.querySelector(css) restituisce il primo elemento per il dato CSS selettore.
In altre parole, il risultato è lo stesso di elem.querySelectorAll(css), ma questultimo cerca tutti gli elementi e ne sceglie uno, mentre elem.querySelector ne cerca solo uno. Quindi è più veloce e anche più breve da scrivere.
corrisponde
I metodi precedenti stavano cercando nel DOM.
elem.matches (css) non cerca nulla , controlla semplicemente se elem corrisponde al selettore CSS specificato. Restituisce true o false.
Il metodo è utile quando iteriamo su elementi (come in un array o qualcosa del genere) e cercando di filtrare quelli che ci interessano.
Ad esempio:
più vicino
Gli antenati di un elemento sono: genitore, il genitore di genitore, suo genitore e così via. Gli antenati insieme formano la catena dei genitori dallelemento allinizio.
Il metodo elem.closest(css) cerca lantenato più vicino che corrisponde al selettore CSS. Anche il elem stesso è incluso nella ricerca.
In altre parole, il metodo closest sale dal elemento e controlla ciascuno dei genitori. Se corrisponde al selettore, la ricerca si interrompe e viene restituito lantenato.
Ad esempio:
getElementsBy *
Ci sono anche altri metodi per cercare per i nodi da un tag, una classe, ecc.
Oggi sono per lo più cronologici, poiché querySelector è più potente e più breve da scrivere.
Quindi qui li trattiamo principalmente per completezza, mentre puoi ancora trovarli nei vecchi script.
-
elem.getElementsByTagName(tag)cerca elementi con il dato tag e ne restituisce la raccolta. Il parametrotagpuò anche essere un"*"per “qualsiasi tag”. -
elem.getElementsByClassName(className)restituisce elementi con la classe CSS specificata. -
document.getElementsByName(name)restituisce elementi con lattributonamespecificato, a livello di documento. Usato molto raramente.
Ad esempio:
Troviamo tutti i tag input allinterno della tabella:
"s" lettera! Gli sviluppatori inesperti a volte dimenticano la lettera "s". Cioè, provano a chiamare getElementByTagName invece di getElementsByTagName.
Il "s" la lettera è assente in getElementById, perché restituisce un singolo elemento. Ma getElementsByTagName restituisce una raccolta di elementi, quindi cè "s" allinterno.
Un altro errore diffuso da principianti è scrivere:
Non funzionerà, perché richiede una raccolta di input e assegna il valore ad essa piuttosto che agli elementi al suo interno.
Dobbiamo iterare sulla raccolta o ottenere un elemento dal suo indice, quindi assegnare, in questo modo:
Ricerca di .article elementi:
Collezioni live
Tutti i metodi "getElementsBy*" restituiscono una raccolta live. Tali raccolte riflettono sempre lo stato corrente del documento e “si aggiorna automaticamente” quando cambia.
Nellesempio seguente, ci sono due script.
- Il primo crea un riferimento alla raccolta di
<div>. Al momento, la sua lunghezza è1. - Il secondo script viene eseguito dopo che il browser ne incontra un altro
<div>, quindi la sua lunghezza è2.
Al contrario , querySelectorAll restituisce una raccolta statica. È come un array fisso di elementi.
Se lo usiamo invece, entrambi gli script restituiscono 1:
Ora possiamo facilmente vedere la differenza. La raccolta statica non è aumentata dopo la comparsa di un nuovo div nel documento.
Riepilogo
Sono disponibili 6 metodi principali per cercare nodi nel DOM:
| Metodo | Ricerche per … | Can cal l su un elemento? | Live? |
querySelector |
Selettore CSS | ✔ | – |
querySelectorAll |
Selettore CSS | ✔ | – |
getElementById |
id |
– | – |
getElementsByName |
name |
– | ✔ |
getElementsByTagName |
tag o "*" |
✔ | ✔ |
getElementsByClassName |
class | ✔ | ✔ |
Di gran lunga i più utilizzati sono querySelector e querySelectorAll, ma getElement(s)By* può essere sporadicamente utile o trovato nei vecchi script.
Oltre a questo:
- Cè
elem.matches(css)per verificare seelemcorrisponde al selettore CSS specificato. - Cè
elem.closest(css)per cercare lantenato più vicino che corrisponde il selettore CSS specificato. Anche ilelemstesso viene verificato.
E menzioniamo qui un altro metodo per verificare la relazione figlio-genitore, poiché a volte è utile:
-
elemA.contains(elemB)restituisce true seelemBè allinterno dielemA(un discendente dielemA) o quandoelemA==elemB.