HTML DOM Element querySelectorAll() ਮੰਥਨ

定义和用法

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

NodeList

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

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

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

另请参阅：

参考手册：

classList 属性

className 属性

querySelector() 方法

getElementsByTagName() 方法

getElementsByClassName() 方法

ایچ تی ایم ال ڈوم اسٹائل آوبجیکٹ

教程：

CSS ਗਰੰਥ

CSS ਸੈਲੈਕਟਰ

CSS ਸੈਲੈਕਟਰ ਮੈਨੂਅਲ

实例

例子 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";

x[i].style.backgroundColor = "red";

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

语法

element.querySelectorAll(cssSelectors)

参数

参数 描述
cssSelectors

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

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

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

提示：有关所有 CSS 选择器的列表，请查看我们的 CSS ਸੈਲੈਕਟਰ ਮੈਨੂਅਲ。

技术细节

返回值：

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

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

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

更多实例

例子 2

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

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

x[i].style.backgroundColor = "red";

例子 3

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

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

x[i].style.backgroundColor = "red";

例子 4

找出

元素中有多少带有 class="example" 的元素（使用 NodeList 对象的 length 属性）：

/* 获取 id="myDIV" 的元素（div），然后获取 div 内所有 class="example" 的 p 元素，返回找到的元素个数 */
var x = document.getElementById("myDIV").querySelectorAll(".example").length;

x[i].style.backgroundColor = "red";

例子 5

设置

元素中 class="example" 的所有元素的背景颜色：

// 获取 id="myDIV" 的元素（ div），然后在 div 中获取所有 class="example" 的元素
var x = document.getElementById("myDIV").querySelectorAll(".example");
// 创建 for 循环并设置 div 中所有 class="example" 元素的背景色
var x = document.getElementById("myDIV").querySelectorAll("h2, div, span");
// ਫੋਰ ਸਕ੍ਰੀਪਟ ਬਣਾਓ ਅਤੇ <div> ਵਿੱਚ ਸਾਰੇ <h2>、<div> ਅਤੇ <span> ਐਲੀਮੈਂਟਾਂ ਦਾ ਬੈਕਗਰਾਊਂਡ ਕਲਰ ਸੈਟ ਕਰੋ
  var i;
for (i = 0; i < x.length; i++) {

x[i].style.backgroundColor = "red";

例子 6

设置

元素中所有

元素的背景颜色：

// 获取 id="myDIV" 的元素（div），然后获取 div 内的所有 p 个元素
var x = document.getElementById("myDIV").querySelectorAll("p");
// 创建 for 循环并设置 div 中所有 p 元素的背景颜色
var x = document.getElementById("myDIV").querySelectorAll("h2, div, span");
// ਫੋਰ ਸਕ੍ਰੀਪਟ ਬਣਾਓ ਅਤੇ <div> ਵਿੱਚ ਸਾਰੇ <h2>、<div> ਅਤੇ <span> ਐਲੀਮੈਂਟਾਂ ਦਾ ਬੈਕਗਰਾਊਂਡ ਕਲਰ ਸੈਟ ਕਰੋ
  var i;
for (i = 0; i < x.length; i++) {

x[i].style.backgroundColor = "red";

例子 7

设置

元素中所有设置 target 属性的 元素的边框样式：

// 获取 id="myDIV" 的元素（ div），然后在 div 中获取所有具有 "target" 属性的  元素
var x = document.getElementById("myDIV").querySelectorAll("a[target]");
// 创建 for 循环并在 div 中设置所有带有 targe t属性的  元素的边框
var x = document.getElementById("myDIV").querySelectorAll("h2, div, span");
// ਫੋਰ ਸਕ੍ਰੀਪਟ ਬਣਾਓ ਅਤੇ <div> ਵਿੱਚ ਸਾਰੇ <h2>、<div> ਅਤੇ <span> ਐਲੀਮੈਂਟਾਂ ਦਾ ਬੈਕਗਰਾਊਂਡ ਕਲਰ ਸੈਟ ਕਰੋ
  var x = document.getElementById("myDIV").querySelectorAll("a[target]");
for (i = 0; i < x.length; i++) {

x[i].style.backgroundColor = "red";

// ਫੋਰ ਸਕ੍ਰੀਪਟ ਬਣਾਓ ਅਤੇ div ਵਿੱਚ ਸਾਰੇ ਟਾਰਗੇਟ ਪ੍ਰਾਪਤ ਕਰਨ ਵਾਲੇ <a> ਐਲੀਮੈਂਟਾਂ ਦਾ ਬਾਰੀਕੀ ਸੈਟ ਕਰੋ

x[i].style.border = "10px solid red";

ਉਦਾਹਰਣ 8
ਸੈਟ <div> ਐਲੀਮੈਂਟ ਵਿੱਚ ਸਾਰੇ <h2>、<div> ਅਤੇ <span> ਐਲੀਮੈਂਟਾਂ ਦਾ ਬੈਕਗਰਾਊਂਡ ਕਲਰ:
// id="myDIV" ਦੇ ਐਲੀਮੈਂਟ (div) ਪ੍ਰਾਪਤ ਕਰੋ ਅਤੇ <div> ਵਿੱਚ ਸਾਰੇ <h2>、<div> ਅਤੇ <span> ਐਲੀਮੈਂਟਾਂ ਪ੍ਰਾਪਤ ਕਰੋ
var x = document.getElementById("myDIV").querySelectorAll("h2, div, span");
// ਫੋਰ ਸਕ੍ਰੀਪਟ ਬਣਾਓ ਅਤੇ <div> ਵਿੱਚ ਸਾਰੇ <h2>、<div> ਅਤੇ <span> ਐਲੀਮੈਂਟਾਂ ਦਾ ਬੈਕਗਰਾਊਂਡ ਕਲਰ ਸੈਟ ਕਰੋ
  var i;
for (i = 0; i < x.length; i++) {

x[i].style.backgroundColor = "red";

}

ਸਵੈ ਸਿਖਰਕਰ ਕਰੋ

ਬਰਾਊਜਰ ਸਪੋਰਟਸ ਚਰਮ ਐਜ਼ੀਡਜ ਫਾਇਰਫਾਕਸ ਸਫਾਰੀ
ਬਰਾਊਜਰ ਸਪੋਰਟਸ ਚਰਮ ਐਜ਼ੀਡਜ ਫਾਇਰਫਾਕਸ ਸਫਾਰੀ
ਓਪੇਰਾ 4.0 9.0 3.5 3.2

10.0ਨੋਟ:

ਸਬੰਧਤ ਪੰਨੇ

CSS ਟੂਰ:CSS ਸੈਲੈਕਟਰ

CSS ਰੈਫਰੈਂਸ ਮੈਨੂਅਲ：CSS ਸੈਲੈਕਟਰ ਮੈਨੂਅਲ

JavaScript ਟੂਰ:JavaScript HTML DOM Node List

JavaScript ਰੈਫਰੈਂਸ ਮੈਨੂਅਲ：element.querySelector()

HTML DOM ਰੈਫਰੈਂਸ ਮੈਨੂਅਲ：document.querySelectorAll()