Element.querySelectorAll()

Il metodo Element querySelectorAll() restituisce una NodeList statica (non dinamica) che rappresenta un elenco di elementi corrispondenti al gruppo specificato di selettori che sono i discendenti dell'elemento su cui è stato chiamato il metodo.

Note: This method is implemented based on the ParentNode mixin's querySelectorAll() method.

Sintassi

elementList = parentNode.querySelectorAll(selectors);

Parametri

selectors
Una DOMString contenente uno o più selettori con cui confrontarsi. Questa stringa deve essere una stringa di un CSS selector valido; se non lo è, viene generata un'eccezione SyntaxError. Vedi Individuazione degli elementi DOM mediante selettori per ulteriori informazioni sull'uso dei selettori per identificare gli elementi. È possibile specificare più selettori separandoli utilizzando le virgole.

Note: I caratteri che non fanno parte della sintassi CSS standard devono essere sottoposti a escape utilizzando un carattere backslash. Poiché JavaScript utilizza anche l'escape del backspace, è necessario prestare particolare attenzione quando si scrivono stringhe letterali utilizzando questi caratteri. Vedi Escaping special characters per maggiori informazioni.

Valore di ritorno

Una NodeList non dinamica contenente un oggetto Element per ciascun nodo discendente che corrisponde ad almeno uno dei selettori specificati.

Note: Se i selectors specificati includono un CSS pseudo-element, l'elenco restituito è sempre vuoto.

Exceptions

SyntaxError
La sintassi della stringa selectors specificata non è valida.

Esempi

Ottenere un elenco di risultati

Per ottenere una NodeList di tutti gli elementi <p> contenuti nell'elemento "myBox":

var matches = myBox.querySelectorAll("p");

Questo esempio restituisce un elenco di tutti gli elementi <div> di "myBox" con la classe "note" o "alert":

var matches = myBox.querySelectorAll("div.note, div.alert");

Qui, otteniamo un elenco degli elementi <p> del documento il cui elemento padre immediato è un div con la classe "highlighted" e che si trovano all'interno di un contenitore il cui ID è "test".

var container = document.querySelector("#test");
var matches = container.querySelectorAll("div.highlighted > p");

Questo esempio usa un attribute selector per restituire una lista degli elementi iframe nel documento che contengono un attributo chiamato "data-src":

var matches = document.querySelectorAll("iframe[data-src]");

Qui, un selettore di attributo viene utilizzato per restituire un elenco degli elementi di elenco contenuti in un elenco il cui ID è "userlist" che hanno un attributo "data-active" il cui valore è "1":

var container = document.querySelector("#userlist");
var matches = container.querySelectorAll("li[data-active='1']");

Accedere ai risultati

Una volta restituita la NodeList degli elementi di corrispondenza, è possibile esaminarlo come qualsiasi array. Se la matrice è vuota (ovvero la sua proprietà length è 0), non è stata trovata alcuna corrispondenza.

Altrimenti, puoi semplicemente usare la notazione standard per accedere al contenuto della lista. È possibile utilizzare qualsiasi istruzione di loop comune, come ad esempio:

var highlightedItems = userList.querySelectorAll(".highlighted");

highlightedItems.forEach(function(userItem) {
  deleteUser(userItem);
});

Note: NodeList non è un vero array, vale a dire che non ha i metodi dell'array come slice, some, map etc. Per convertirlo in un array, prova Array.from(nodeList).

Note dell'utente

querySelectorAll() si comporta in modo diverso rispetto alle più comuni librerie DOM JavaScript, il che potrebbe portare a risultati imprevisti.

HTML

Considera questo HTML, con i suoi tre blocchi <div> annidati.

<div class="outer">
  <div class="select">
    <div class="inner">
    </div>
  </div>
</div>

JavaScript

var select = document.querySelector('.select');
var inner = select.querySelectorAll('.outer .inner');
inner.length; // 1, not 0!

In questo esempio, quando si seleziona ".outer .inner" nel contesto il <div> con la classe "select", tsi trova ancora l'elemento con la classe ".inner", anche se​​​​​​ .outer non è un discendente dell'elemento base su cui viene eseguita la ricerca (".select"). Per impostazione predefinita, querySelectorAll() verifica solo che l'ultimo elemento nel selettore si trovi all'interno dell'ambito di ricerca.

La pseudo-classe :scope ripristina il comportamento previsto, abbinando solo i selettori sui discendenti dell'elemento base:

var select = document.querySelector('.select');
var inner = select.querySelectorAll(':scope .outer .inner');
inner.length; // 0

Specifiche

Compatibilità con i browser

BCD tables only load in the browser

Vedi anche