Diese Übersetzung ist in Arbeit.


Gibt eine statische NodeList aller Elemente absteigend des Elements, auf welchem querySelectorAll ausgeführt wird, die mit den angegebenen CSS Selektoren übereinstimmen.


elementList = baseElement.querySelectorAll(selectors);


ist statische Node Liste [ NodeList[elements] ] mit element Objekten.
ist ein element Objekt.
ist eine Gruppe von Selektoren die mit dem Element im DOM übereinstimmen soll. 


Dieses Beispiel gibt eine Liste aller p Elementen im HTML body zurück:

let matches = document.body.querySelectorAll('p'); 

This example returns a list of p children elements under a container, whose parent is a div that has the class 'highlighted':

let el = document.querySelector('#test');    //return an element with id='test'
let matches = el.querySelectorAll('div.highlighted > p'); // return a NodeList of p wrapped in a div with attribute class "highlighted"

This example returns a list of iframe elements that contain a data attribute 'src':

let matches = el.querySelectorAll('iframe[data-src]'); 


If the specified "selectors" are not found inside the DOM of the page, the method queryselectorAll returns an empty NodeList as specified below:

> let x = document.body.querySelectorAll('.highlighted'); //case: if the class highlighted doesn't exist in any attribute "class" of the DOM the result is
> [] //empty NodeList

querySelectorAll() was introduced in the WebApps API.

The string argument pass to querySelectorAll must follow the CSS syntax. See document.querySelector for a concrete example.

We could access a single item inside the NodeList in the following way:

let x = document.body.querySelectorAll('.highlighted'); 
x.length; //return the size of x
x[i_item]; //where i_item has a value between 0 and x.length-1. The operator "[]" return as in an array the element at index "i_item"

We could iterate inside a NodeList with the construct for(....) {...} as in the following code:

 let x = document.body.querySelectorAll('.highlighted');
 let index = 0;
 for( index=0; index < x.length; index++ ) {

So in the above way, it is possible to manage and modify the behaviour of the page.


querySelectorAll() behaves differently than most common JavaScript DOM libraries, which might lead to unexpected results:

<div class="outer">
  <div class="select">
    <div class="inner">
let select = document.querySelector('.select');
let inner = select.querySelectorAll('.outer .inner');
inner.length; // 1, not 0!

In this example, when selecting .outer .inner in the context of .select, .inner is still found, even though .outer is not a descendant of the baseElement (.select).
querySelectorAll() only verifies that the last element in the selector is within the baseElement.

The :scope pseudo-class restores the expected behavior, only matching selectors on descendants of the baseElement:

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


Specification Status Comment
Die Definition von 'querySelectorAll' in dieser Spezifikation.
Selectors API Level 2
Die Definition von 'querySelectorAll' in dieser Spezifikation.
Selectors API Level 1
Die Definition von 'querySelectorAll' in dieser Spezifikation.

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1 3.5 (1.9.1) 8 10 3.2 (525.3)
:scope pseudo-class (Ja) 32 Nicht unterstützt 15[1] 7.0
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support (Ja) 1.0 (1.9.1) ? ? (Ja)
:scope pseudo-class ? 32 Nicht unterstützt Nicht unterstützt 7.0

[1] Supported in Opera 15+ by enabling the "Enable <style scoped>" or "Enable experimental Web Platform features" flag in chrome://flags.

See also

Schlagwörter des Dokuments und Mitwirkende

 Mitwirkende an dieser Seite: Wombosvideo
 Zuletzt aktualisiert von: Wombosvideo,