HTML DOM Document querySelectorAll() နည်းလမ်း

  • အဆင်းနှင့်ကို
  • နောက်ဆုံး
  • အဆင်းတက် HTML DOM Documents

အသုံးပြုခြင်း နှင့် ဖော်ပြချက်

querySelectorAll() အမှုလုပ်သည် သုံးသပ်ထားသော CSS ရှာဖွေသည် နှင့် ကိုက်ညီသော အရာတို့၏ အားလုံးကို ပြန်လည်သတ်မှတ်ပါလျှင်

querySelectorAll() အမှုလုပ်သည် သုံးသပ်ထားသော NodeList ကို ပြန်လည်သတ်မှတ်ပါလျှင်

အရာရှာဖွေသည် အမှားများ ဖြစ်ပါလျှင် querySelectorAll() အမှုလုပ်သည် ဖြစ်ပေါ်စေပါလျှင် SYNTAX_ERR အကြမ်းဖတ်မှု

အကျိုးသမား

အမှတ် 1

class="example" ရှိ အရာတို့၏ အားလုံးကို ရယူပါလျှင်

document.querySelectorAll(".example");

亲自试一试

အမှတ် 2

ပထမဆုံး <p> အရာတို့၏ နောက်ခံ အမှတ်အသားပြုထားသော အရောင်ကို ပြင်ဆင်ပါလျှင်

const nodeList= document.querySelectorAll("p");
nodeList[0].style.backgroundColor = "red";

亲自试一试

အမှတ် 3

ပထမဆုံး class="example" ရှိ အသုံးပြုထားသော <p> အရာတို့၏ နောက်ခံ အမှတ်အသားပြုထားသော အရောင်ကို ပြင်ဆင်ပါလျှင်

const nodeList = document.querySelectorAll("p.example");
nodeList[0].style.backgroundColor = "red";

亲自试一试

အမှတ် 4

class="example" ရှိ အရာတို့၏ အရေအတွက်

let numb = document.querySelectorAll(".example").length;

亲自试一试

အမှတ် 5

အရာများကို အစားထိုးပြီး class="example" ရှိ အသုံးပြုထားသော အရာတို့၏ နောက်ခံ အမှတ်အသားပြုထားသော အရောင်များကို တည်ဆောက်ပေးပါလျှင်

const nodeList = document.querySelectorAll(".example");
for (let i = 0; i < nodeList.length; i++) {
  nodeList[i].style.backgroundColor = "red";
}

亲自试一试

例子 6

设置所有

元素的背景颜色：

let nodeList = document.querySelectorAll("p");
for (let i = 0; i < nodeList.length; i++) {
  nodeList[i].style.backgroundColor = "red";
}

亲自试一试

例子 7

设置所有使用 "target" 属性的 元素的边框：

const nodeList = document.querySelectorAll("a[target]");
for (let i = 0; i < nodeList.length; i++) {
  nodeList[i].style.border = "10px solid red";
}

亲自试一试

例子 8

设置父元素是

元素的每个

元素的背景颜色：

const nodeList = document.querySelectorAll("div > p");
for (let i = 0; i < nodeList.length; i++) {
  nodeList[i].style.backgroundColor = "red";
}

亲自试一试

例子 9

设置所有

、
和 元素的背景颜色：

const nodeList = document.querySelectorAll("h3, div, span");
for (let i = 0; i < nodeList.length; i++) {
  nodeList[i].style.backgroundColor = "red";
}

亲自试一试

语法

document.querySelectorAll(CSSselectors)

参数

参数 ဖော်ပြ
CSSselectors

必需。一个或多个 CSS 选择器。

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

ပြင်ဆင်ချက် အပြင်အလျင် ကို ကြည့်ရှုရန် CSS ရှာဖွေရန် စာတမ်း。

အချက်အလက် အများအပြား အသုံးပြုရာတွင် ကြိမ်ကြားစွာ ခွဲခြားပြီး အစီအစဉ်အောက်ခံ ဖြင့် ပေးပြီးပြီ(အဆိုပါ အချက်အလက် ကို ကျမ်းကျိန်းသည်)。

ပြန်လည်ပေးသော အချက်အလက်

အမျိုးအစား ဖော်ပြ
အချက်အလက်

CSS ရှာဖွေသည် နှင့် တူညီသော အရာဝတ္တု(အကို) NodeList အချက်အလက်

တူညီသော အရာကို တွေ့ရှိခြင်း မရှိဘဲ အားလုံးသော NodeList အချက်အလက် ကို ပြန်လည်ပေးသည်。

HTMLCollection နှင့် NodeList အကွဲခြားခြင်း

NodeList 和 HTMLcollection အတူတူသည်။

နှစ်ခုစလုံးမှာ အခြေခံပုံစံတူညီသည်။ အခြေခံပုံစံမှ အခြေခံပုံစံ ကို အခြေခံပုံစံ ကို ထုတ်ယူသော အခြေခံပုံစံ(အကို) အစု(စာအုပ်) ဖြစ်သည်။ အစုအသုံး အရာဝတ္တု(အကို) ကို အစီအစဉ်အောက်ခံ အောက်ခံ ဖြင့် အားဏာပေးနိုင်သည်။ အစီအစဉ်အောက်ခံ 0 မှ စတင်သည်။

နှစ်ခုစလုံးပင် length သုံးစွဲသည်၊ အစားအသေးစာအုပ်(စု) တွင် အသုံးပြုသော အရာဝတ္တု(အကို) အရေအတွက် ကို ပြန်လည်ပေးသည်。

HTMLCollection ဟူသည်文档元素的集合。

NodeList 是文档节点（元素节点、属性节点和文本节点）的集合。

HTMLCollection 项目可以通过它们的名称、id 或索引号来访问。

NodeList 项目只能通过它们的索引号访问。

HTMLCollection 始终是实时的集合。

例如：如果将

  • 元素添加到 DOM 中的列表，则 HTMLCollection 中的列表也会发生变化。

    NodeList 通常是静态的集合。

    例如：如果将

  • 元素添加到 DOM 中的列表，则 NodeList 中的列表不会改变。

    getElementsByClassName() 和 getElementsByTagName() 方法都返回实时 HTMLCollection。

    querySelectorAll() 方法返回静态 NodeList。

    childNodes 属性返回实时 NodeList。

    • ဘရာဇီးနာ ထောက်ပံ့

    document.querySelectorAll() ဖြစ်ပါတယ် DOM Level 3 (2004) အခြေခံအရာ

    အားလုံး ဘရာဇီးနာ ကို ထောက်ပံ့ပါသည်:

    ခရုစ် အီးအီ အိန်ဂျယ် ဖော့စ် ဆိုဖ် အိုပရာ
    ခရုစ် အီးအီ အိန်ဂျယ် ဖော့စ် ဆိုဖ် အိုပရာ
    ထောက်ပံ့ 9-11 ထောက်ပံ့ ထောက်ပံ့ ထောက်ပံ့ ထောက်ပံ့
    • အဆင်းနှင့်ကို
    • နောက်ဆုံး
    • အဆင်းတက် HTML DOM Documents