English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
querySelectorAll()Liste der im Dokument befindlichen Elemente, die mit der angegebenen Selektorgruppe übereinstimmen (verwendet einen tiefen-firsten preorder-Traversierung des Dokumentknotens). Das zurückgegebene Objekt ist NodeList .
Die Elemente im zurückgegebenen NodeList sind in der Reihenfolge ihrer im Quellcode angegebenen Position sortiert.
Der zurückgegebene NodeList kann über die Indexnummer erreicht werden. Der Index beginnt bei 0.
NodeList ist eine statische Sammlung, was bedeutet, dass Änderungen im DOM für diese Sammlung irrelevant sind.
Verwenden Sie das length-Attribut des NodeList, um die Anzahl der Elemente mit dem angegebenen Selektor zu bestimmen, und dann können Sie alle Elemente durchlaufen und die benötigten Informationen extrahieren.
document.querySelectorAll(selectors)
document.querySelectorAll("div");Testen Sie heraus‹/›Die Zahlen in der Tabelle geben die erste Browserversion an, die den Methodenaufruf querySelectorAll() vollständig unterstützt:
| Methoden | |||||
| querySelectorAll() | 1 | 3.5 | 10 | 3.2 | 8 |
| Parameter | Beschreibung |
|---|---|
| selectors | Eine Zeichenkette, die einen oder mehrere zu passende Selektoren enthält. Diese Zeichenkette muss gültig seinCSS SelektorenZeichenkette. |
| Rückgabewert: | Ein NodeList-Objekt, das die im Dokument befindlichen Elemente repräsentiert, dieCSS SelektorenAlle passenden Elemente. |
|---|---|
| Ausnahmen: | SyntaxError-Die Syntax der angegebenen Selektorzeichenkette ist ungültig |
| DOM Version: | DOM-Ebenen1 |
Alle Elemente mit class="demo" abrufen：
document.querySelectorAll(".demo");Testen Sie heraus‹/›Dieser Beispielcode gibt eine Liste aller <div>-Elemente im Dokument zurück, die die Klasse "note" haben：
document.querySelectorAll("div.note");Testen Sie heraus‹/›Setzen Sie die Hintergrundfarbe aller <h1>，<p>和<div>元素的背景色：
document.querySelectorAll("h1, p, div");Testen Sie heraus‹/›CSS-Tutorial:CSS Selektoren
CSS Referenz:CSS#idSelektoren
CSS Referenz: CSS .class Selektoren
DOM Document querySelector() Methoden
DOM Document getElementsByClassName() Methoden
DOM Document getElementsByTagName() Methoden