HTML DOM Element querySelectorAll() စက်သုံးခြင်း

定义和用法

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

NodeList

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

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

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

另请参阅：

参考手册：

classList 属性

className 属性

querySelector() 方法

getElementsByTagName() 方法

getElementsByClassName() 方法

HTML DOM Style အရင်းအမြစ်

教程：

CSS နည်းပုံ

CSS ရှာဖွေသူ

CSS ရှာဖွေသူ စာရင်း

实例

例子 1

设置

元素中 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";

ကိုယ်တိုင် ကြိုးစားကြည့်ပါ

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

语法

element.querySelectorAll(cssSelectors)

参数

参数 描述
cssSelectors

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

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

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

提示：有关所有 CSS 选择器的列表，请查看我们的 CSS ရှာဖွေသူ စာရင်း。

技术细节

返回值：

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

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

သတိပြုရမည်အသုံးပြီး ရှိသော အခြားအသုံးပြီး အချက်အလက်အသင်း အား စစ်ဆေးပြီး
DOM အဆင့် Selectors Level 1 Document Object

အချက်အလက်အသင်း

အမှတ် 2

အသုံးပြီး <div> အသုံးပြီး အချက်အလက်အသင်း အား စစ်ဆေးပြီး ပထမပိုင်း class="example" ရှိသော အချက်အလက်အသင်း အခြေအနေကို စစ်ဆေးပြီး

// ပြန်သတင်း id="myDIV" ဖော်ထုတ် အကိရိယာ (div) ကို အပြင်ဘား တွင် အခြေအား p အကိရိယာများ ကို တွေ့ရှိ
var x = document.getElementById("myDIV").querySelectorAll("p"); 
// အသုံးပြီး div အသုံးပြီး ပထမပိုင်း class="example" ရှိသော အချက်အလက်အသင်း အခြေအနေကို စစ်ဆေးပြီး
x[0].style.backgroundColor = "red";

ကိုယ်တိုင် ကြိုးစားကြည့်ပါ

အမှတ် 3

获取 <div> အသုံးပြီး class="example" ရှိသော အချက်အလက်အသင်း အပေါ်တွင် class="example" ရှိသော အချက်အလက်အသင်း အား စစ်ဆေးပြီး ပထမပိုင်း class="example" ရှိသော အချက်အလက်အသင်း အခြေအနေကို စစ်ဆေးပြီး နောက်ပိုင်း class="example" ရှိသော အချက်အလက်အသင်း အခြေအနေကို စစ်ဆေးပြီး

// ပြန်သတင်း id="myDIV" ဖော်ထုတ် အကိရိယာ (div) ကို အပြင်ဘား တွင် အခြေအား class="example" ဖုန်း ပါဝင်သော p အကိရိယာများ ကို တွေ့ရှိ
var x = document.getElementById("myDIV").querySelectorAll("p.example"); 
// div အကိရိယာတွင် class="example" ဖုန်း ပါဝင်သော ပထမ p အကိရိယာ (index 0) အရိုးအသား ပြင်ဆင်
x[0].style.backgroundColor = "red";

ကိုယ်တိုင် ကြိုးစားကြည့်ပါ

အမှတ် 4

အခြေအား <div> အကိရိယာတွင် class="example" ဖုန်း ပါဝင်သော အကိရိယာများ အရေအတွက် တွေ့ရှိ (အကိရိယာအစုအခြာ အကိရိယာအစုအခြာ အခြေအား length ဖုန်း အသုံးပြု)

/* ပြန်သတင်း id="myDIV" ဖော်ထုတ် အကိရိယာ (div) ကို အပြင်ဘား တွင် အခြေအား class="example" ဖုန်း ပါဝင်သော အကိရိယာများ အတွင်းသို့ ပြန်သတင်း p အကိရိယာများ ကို တွေ့ရှိ နှင့် တွေ့ရှိသော အကိရိယာများ အရေအတွက် ပြန်သတင်း */
var x = document.getElementById("myDIV").querySelectorAll(".example").length;

ကိုယ်တိုင် ကြိုးစားကြည့်ပါ

အမှတ် 5

အခြေအား <div> အကိရိယာတွင် class="example" ဖုန်း ပါဝင်သော အကိရိယာများ အရိုးအသား အကြီးအကျယ် ပြင်ဆင်

// ပြန်သတင်း id="myDIV" ဖော်ထုတ် အကိရိယာ (div) ကို အပြင်ဘား တွင် အခြေအား class="example" ဖုန်း ပါဝင်သော အကိရိယာများ ကို တွေ့ရှိ
var x = document.getElementById("myDIV").querySelectorAll(".example");
// for ကြိုးစား ဖွင့်ပြခြင်း နှင့် div အကိရိယာတွင် အခြေအား class="example" ဖုန်း ပါဝင်သော အကိရိယာများ အရိုးအသား ပြင်ဆင်
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

ကိုယ်တိုင် ကြိုးစားကြည့်ပါ

အမှတ် 6

အခြေအား <div> အကိရိယာတွင် အခြေအား <p> အကိရိယာများ အရိုးအသား အကြီးအကျယ် ပြင်ဆင်

// ပြန်သတင်း id="myDIV" ဖော်ထုတ် အကိရိယာ (div) ကို အပြင်ဘား တွင် အခြေအား p အကိရိယာများ ကို တွေ့ရှိ
var x = document.getElementById("myDIV").querySelectorAll("p");
// for ကြိုးစား ဖွင့်ပြခြင်း နှင့် div အကိရိယာတွင် အခြေအား p အကိရိယာများ အရိုးအသား အကြီးအကျယ် ပြင်ဆင်
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

ကိုယ်တိုင် ကြိုးစားကြည့်ပါ

အမှတ် 7

အခြေအား <div> အကိရိယာတွင် အခြေအား target ဖုန်း ပါဝင်သော <a> အကိရိယာများ အဖက်အရိုး စက်တင့်

// ပြန်သတင်း id="myDIV" ဖော်ထုတ် အကိရိယာ (div) ကို အပြင်ဘား တွင် အခြေအား "target" ဖုန်းကို ပါဝင်သော <a> အကိရိယာများ ကို တွေ့ရှိ
var x = document.getElementById("myDIV").querySelectorAll("a[target]");
// for နိုင်ငံရေး ကို ဖွင့်ပြခြင်း နှင့် div အတွင်း အချက်အလက်များ အား target အခြောက်အရွယ် ဖြစ်သော <a> အရပ်များ၏ အခြောက်အရွယ် ကို တည်ဆောက်ပါ
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.border = "10px solid red";
}

ကိုယ်တိုင် ကြိုးစားကြည့်ပါ

အမှတ် 8

အရပ် <div> အတွင်း အချက်အလက်များ အား <h2>、<div> နှင့် <span> အရပ်များ၏ အခြောက်အရွယ် အော်ဒါ ကို တည်ဆောက်ပါ

// id="myDIV" ဖြစ်သော အရပ်ကို ရယူပြီး အရပ်အတွင်း အချက်အလက်များ အား <h2>、<div> နှင့် <span> အရပ်များ ကို ရယူပါ
var x = document.getElementById("myDIV").querySelectorAll("h2, div, span");
// for နိုင်ငံရေး ကို ဖွင့်ပြခြင်း နှင့် <div> အရပ်တွင် အချက်အလက်များ အား <h2>、<div> နှင့် <span> အရပ်များ၏ နောက်ခံ အော်ဒါ ကို တည်ဆောက်ပြီး ဖွင့်ပြပါ
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

ကိုယ်တိုင် ကြိုးစားကြည့်ပါ

ဘူတာ ထောက်ပံ့

အချက်အလက် တွင် ဖော်ပြထားသော ဖြေဖြူမှု သည် အပြင်းအထန် ထောက်ပံ့သော ဘူတာ ကုန်းလုံး ကို ဖော်ပြထားသည်။

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

သတိပြုရမည်Internet Explorer 8 သည် CSS2 ရှာဖွေသူ ကို ထောက်ပံ့သည်။ IE9 နှင့် အထက် အဆင်းအတန်းများ သည် CSS3 ကို ထောက်ပံ့သည်။

ပတ်သက်တဲ့ စာမေးသတ္တု

CSS ပညာရှင်：CSS ရှာဖွေသူ

CSS ပြည့်ရှင်ချက်ချုပ်：CSS ရှာဖွေသူ စာရင်း

JavaScript ပညာရှင်：JavaScript HTML DOM Node List

JavaScript ပြည့်ရှင်ချက်ချုပ်：element.querySelector()

HTML DOM ပြည့်ရှင်ချက်ချုပ်：document.querySelectorAll()