Element.querySelectorAll()

Diese Übersetzung ist unvollständig. Bitte helfen Sie, diesen Artikel aus dem Englischen zu übersetzen.

Summary

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

Syntax

elementList = baseElement.querySelectorAll(selectors);

wobei:

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

Beispiele

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

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

Dieses Beispiel gibt eine Liste der p Unter-Elementen eines Containers, dessen Überobjekt ein div mit der Klasse 'highlighted' ist:

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"

Dieses Beispiel gibt eine Liste der iframe Elementen die ein data Attribut 'src' besitzen:

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

Bemerkungen

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++ ) {
       console.log(x[index]);
 }

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

Quirks

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

<div class="outer">
  <div class="select">
    <div class="inner">
    </div>
  </div>
</div>
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

Specifications

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

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

Schlagwörter: 
 Mitwirkende an dieser Seite: Wombosvideo
 Zuletzt aktualisiert von: Wombosvideo,