Documento DOM HTML querySelector()
Esempi
Ottieni il primo elemento <p>:
document.querySelector("p");
Ottieni il primo elemento con class="example":
document.querySelector(".example");
Altri esempi di seguito.
Definizione e utilizzo
Il querySelector()metodo restituisce il primo elemento che corrisponde a un selettore CSS.
Per restituire tutte le corrispondenze (non solo la prima), utilizzare querySelectorAll()invece.
Entrambi querySelector()e querySelectorAll()restituiscono un NodeList .
Entrambi querySelector()e querySelectorAll()generano un'eccezione SYNTAX_ERR se i selettori non sono validi.
Esercitazioni:
L'esercitazione sull'elenco dei nodi JavaScript
Metodi QuerySelector:
Il metodo Element querySelector()
Il metodo Element querySelectorAll()
Il metodo Document querySelector()
Il metodo Document querySelectorAll()
Metodi GetElement:
Il metodo Document getElementById()
Elenco nodi HTML DOM / Raccolta HTML
Le differenze tra una HTMLCollection e una NodeList
Una NodeList e una HTMLCollection sono entrambe raccolte (liste) di nodi (elementi) di tipo array estratti da un documento. È possibile accedere ai nodi tramite numeri di indice. L'indice inizia da 0.
Entrambi gli oggetti hanno una proprietà length che restituisce il numero di elementi nell'elenco.
Una HTMLCollection è una raccolta live : se aggiungi un elemento <li> a un elenco nel DOM, anche l'elenco in HTMLCollection cambierà.
Una NodeList è una raccolta statica : se aggiungi un elemento <li> a un elenco nel DOM, l'elenco in NodeList non cambierà.
I metodi getElementsByClassName()e getElementsByTagName()
restituiscono una HTMLCollection.
I metodi querySelector()e querySelectorAll()
restituiscono una NodeList.
Sintassi
document.querySelector(CSS selectors)
Parametri
| Parameter | Description |
| CSS selectors |
Required. One or more CSS selectors. CSS selectors select HTML elements based on id, classes, types, attributes, values of attributes etc. For a full list, go to our CSS Selectors Reference. For multiple selectors, separate each selector with a comma (See "More Examples"). |
Valore di ritorno
| Tipo | Descrizione |
| Oggetto | Una NodeList con il primo elemento che corrisponde ai selettori CSS. Se non vengono trovate corrispondenze, nullviene restituito. |
Altri esempi
Ottieni il primo elemento <p> con class="example":
document.querySelector("p.example");
Modifica il testo dell'elemento con id="demo":
document.querySelector("#demo").innerHTML = "Hello World!";
Seleziona il primo elemento <p> con il genitore è un elemento <div>.
document.querySelector("div > p");
Seleziona il primo elemento <a> che ha un attributo "target":
document.querySelector("a[target]");
Seleziona il primo <h3> o il primo <h4>:
<h3>A h3 element</h3>
<h4>A h4 element</h4>
document.querySelector("h3, h4").style.backgroundColor = "red";
Seleziona il primo <h3> o il primo <h4>:
<h4>A h4 element</h4>
<h3>A h3 element</h3>
document.querySelector("h3, h4").style.backgroundColor = "red";
Supporto browser
document.querySelector() è una funzionalità DOM di livello 1 (1998).
È completamente supportato in tutti i browser:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 9-11 | Yes | Yes | Yes | Yes |