HTML DOM Element querySelectorAll() Methode

定义和用法

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

NodeList

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

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

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

另请参阅：

参考手册：

classList 属性

className 属性

querySelector() 方法

getElementsByTagName() 方法

getElementsByClassName() 方法

HTML DOM Style Object

教程：

CSS syntax

CSS selector

CSS selector reference manual

实例

Voorbeeld 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";

Probeer het zelf

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

语法

element.querySelectorAll(cssSelectors)

参数

参数 描述
cssSelectors

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

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

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

提示：有关所有 CSS 选择器的列表，请查看我们的 CSS selector reference manual。

Technische details

返回值：

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

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

Opmerking:如果指定的选择器无效，则抛出 SYNTAX_ERR 异常
DOM versie： Document Object Selectors Niveau 1

Meer voorbeelden

Voorbeeld 2

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

// Verkrijg het element met id="myDIV" (div) en haal alle p-elementen binnen div op
var x = document.getElementById("myDIV").querySelectorAll("p"); 
// 设置 div 中第一个 <p> 元素（索引 0）的背景颜色
x[0].style.backgroundColor = "red";

Probeer het zelf

Voorbeeld 3

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

// Verkrijg het element met id="myDIV" (div) en haal alle p-elementen met class="example" binnen div op
var x = document.getElementById("myDIV").querySelectorAll("p.example"); 
// Stel de achtergrondkleur in van het eerste <p> element met class="example" binnen div (index 0)
x[0].style.backgroundColor = "red";

Probeer het zelf

Voorbeeld 4

Vind hoeveel elementen met class="example" er in het <div> element zijn (gebruik de length-eigenschap van het NodeList-object):

/* Verkrijg het element met id="myDIV" (div) en haal alle p-elementen binnen div met class="example" op, retourneer het aantal gevonden elementen */
var x = document.getElementById("myDIV").querySelectorAll(".example").length;

Probeer het zelf

Voorbeeld 5

Stel de achtergrondkleur in van alle elementen met class="example" binnen het <div> element:

// Verkrijg het element met id="myDIV" (div) en haal alle elementen met class="example" binnen div op
var x = document.getElementById("myDIV").querySelectorAll(".example");
// Maak een for-lus en stel de achtergrondkleur in van alle elementen met class="example" binnen div
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

Probeer het zelf

Voorbeeld 6

Stel de achtergrondkleur in van alle <p> elementen binnen het <div> element:

// Verkrijg het element met id="myDIV" (div) en haal alle p-elementen binnen div op
var x = document.getElementById("myDIV").querySelectorAll("p");
// Maak een for-lus en stel de achtergrondkleur in van alle p-elementen binnen div
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

Probeer het zelf

Voorbeeld 7

Stel het randstijl van alle <a> elementen met de eigenschap target in het <div> element in:

// Verkrijg het element met id="myDIV" (div) en haal alle <a> elementen binnen div met de eigenschap "target" op
var x = document.getElementById("myDIV").querySelectorAll("a[target]");
// Maak een for-lus en stel de border in van alle <a> elementen met de target-eigenschap in div
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.border = "10px solid red";
}

Probeer het zelf

Voorbeeld 8

Stel de achtergrondkleur in van alle <h2>、<div> en <span> elementen in <div> in:

// Haal het element met id="myDIV" (div) op en haal alle <h2>、<div> en <span> elementen binnenin op
var x = document.getElementById("myDIV").querySelectorAll("h2, div, span");
// Maak een for-lus en stel de achtergrondkleur in van alle <h2>、<div> en <span> elementen in <div>
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

Probeer het zelf

Browserondersteuning

De cijfers in de tabel vermelden de eerste browserversie die deze methode volledig ondersteunt.

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

Opmerking:Internet Explorer 8 ondersteunt CSS2 selectors. IE9 en hogere versies ondersteunen ook CSS3.

Gerelateerde pagina's

CSS Handleiding:CSS selector

CSS Referentiehandleiding:CSS selector reference manual

JavaScript Handleiding:JavaScript HTML DOM Node List

JavaScript Referentiehandleiding:element.querySelector()

HTML DOM Referentiehandleiding:document.querySelectorAll()