HTML DOM Element querySelectorAll() Methode

定义和用法

querySelectorAll() 方法返回与指定 CSS 选择器匹配的元素的子元素的集合，以静态 NodeList 对象。

NodeList

NodeList 是类数组的节点集合（列表）。

列表中的节点可以通过索引（下标）访问。索引从 0 开始。

length 属性可返回列表中的节点数。

另请参阅：

参考手册：

classList 属性

className 属性

querySelector() 方法

getElementsByTagName() 方法

getElementsByClassName() 方法

HTML DOM Style-Objekt

教程：

CSS-Syntax

CSS-Selektoren

CSS-Selektoren-Referenzhandbuch

实例

Beispiel 1

设置 <div> 元素中 class="example" 的第一个元素的背景颜色：

// 获取 id="myDIV" 的元素（div），然后获取 div 中 class="example" 的的所有元素
var x = document.getElementById("myDIV").querySelectorAll(".example"); 
// 设置 div 中第一个 class="example" (index 0) 的元素的背景颜色
x[0].style.backgroundColor = "red";

Selbst ausprobieren

提示：页面下方提供更多实例。

语法

element.querySelectorAll(cssSelectors)

参数

参数 描述
cssSelectors

必需。字符串。规定一个或多个 CSS 选择器来匹配元素。

CSS 选择器用于根据 id、类、类型、属性、属性值等选择 HTML 元素。

对于多个选择器，用逗号分隔每个选择器。

提示：有关所有 CSS 选择器的列表，请查看我们的 CSS-Selektoren-Referenzhandbuch。

技术细节

返回值：

NodeList 对象，表示与指定 CSS 选择器匹配的当前元素的所有后代元素。

NodeList 是静态的集合，这意味着 DOM 中的改变对集合没有影响。

Hinweis:如果指定的选择器无效，则抛出 SYNTAX_ERR 异常
DOM 版本： Selectors Level 1 Document Object

更多信息

Beispiel 2

获取 <div> 元素内的所有 <p> 元素，并设置第一个 <p> 元素（索引 0）的背景颜色：

// Erhalten Sie das Element mit id="myDIV" (div) und dann ermitteln Sie alle p-Elemente im div:
var x = document.getElementById("myDIV").querySelectorAll("p"); 
// 设置 div 中第一个 <p> 元素（索引 0）的背景颜色
x[0].style.backgroundColor = "red";

Selbst ausprobieren

Beispiel 3

获取 <div> 中 class="example" 的所有 <p> 元素，并设置第一个 <p> 元素的背景：

// Erhalten Sie das Element mit id="myDIV" (div) und dann ermitteln Sie alle p-Elemente mit der Klasse "example" im div
var x = document.getElementById("myDIV").querySelectorAll("p.example"); 
// Setzen Sie die Hintergrundfarbe des ersten <p>-Elements mit der Klasse "example" im div (Index 0):
x[0].style.backgroundColor = "red";

Selbst ausprobieren

Beispiel 4

Finden Sie heraus, wie viele Elemente mit der Klasse "example" im <div>-Element vorhanden sind (verwenden Sie das Attribut length des NodeList-Objekts):

/* Erhalten Sie das Element mit id="myDIV" (div), dann ermitteln Sie alle p-Elemente mit der Klasse "example" im div und geben Sie die Anzahl der gefundenen Elemente zurück */
var x = document.getElementById("myDIV").querySelectorAll(".example").length;

Selbst ausprobieren

Beispiel 5

Setzen Sie die Hintergrundfarbe aller Elemente mit der Klasse "example" im <div>-Element:

// Erhalten Sie das Element mit id="myDIV" (div) und dann ermitteln Sie alle Elemente mit der Klasse "example" im div:
var x = document.getElementById("myDIV").querySelectorAll(".example");
// Erstellen Sie einen for-Schleife und setzen Sie die Hintergrundfarbe aller Elemente mit der Klasse "example" im div:
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

Selbst ausprobieren

Beispiel 6

Setzen Sie die Hintergrundfarbe aller <p>-Elemente im <div>-Element:

// Erhalten Sie das Element mit id="myDIV" (div) und dann ermitteln Sie alle p-Elemente im div:
var x = document.getElementById("myDIV").querySelectorAll("p");
// Erstellen Sie einen for-Schleife und setzen Sie die Hintergrundfarbe aller p-Elemente im div:
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

Selbst ausprobieren

Beispiel 7

Setzen Sie den Rahmenstil aller <a>-Elemente mit dem Attribut target im <div>-Element:

// Erhalten Sie das Element mit id="myDIV" (div) und dann ermitteln Sie alle <a>-Elemente im div mit dem Attribut "target"
var x = document.getElementById("myDIV").querySelectorAll("a[target]");
// Erstelle einen for-Schleif und setze die Rahmenfarbe aller <a>-Elemente mit dem Attribut target im div
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.border = "10px solid red";
}

Selbst ausprobieren

Beispiel 8

Setze die Hintergrundfarbe aller <h2>, <div> und <span>-Elemente im <div>:

// Hole das Element mit id="myDIV" (div) und alle <h2>, <div> und <span>-Elemente im <div>
var x = document.getElementById("myDIV").querySelectorAll("h2, div, span");
// Erstelle einen for-Schleif und setze die Hintergrundfarbe aller <h2>, <div> und <span>-Elemente in <div>
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

Selbst ausprobieren

Browser-Unterstützung

Die Zahlen in der Tabelle geben die erste Browser-Version an, die diese Methode vollständig unterstützt.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.5 3.2 10.0

Hinweis:Internet Explorer 8 unterstützt CSS2-Selektoren. IE9 und höher unterstützen auch CSS3.

Verwandte Seiten

CSS-Tutorial:CSS-Selektoren

CSS Referenzhandbuch:CSS-Selektoren-Referenzhandbuch

JavaScript-Tutorial:JavaScript HTML DOM Node List

JavaScript Referenzhandbuch:element.querySelector()

HTML DOM Referenzhandbuch:document.querySelectorAll()