HTML DOM Document querySelector() စက်မှု

定义和用法

querySelector() 方法返回与 CSS 选择器匹配的第一个元素。

如需返回所有匹配项（不仅是第一个匹配项），请改用 querySelectorAll()。

如果选择器无效，则 querySelector() နှင့် querySelectorAll() 都会抛出 SYNTAX_ERR 异常。

实例

例子 1

获取第一个

元素：

document.querySelector("p");

亲自试一试

例子 2

获取 class="example" 的第一个元素：

document.querySelector(".example");

亲自试一试

例子 3

获取 class="example" 的第一个

元素：

document.querySelector("p.example");

亲自试一试

例子 4

更改 id="demo" 的元素的文本：

document.querySelector("#demo").innerHTML = "Hello World!";

亲自试一试

例子 5

选择第一个其父元素是

元素的

元素：

document.querySelector("div > p");

亲自试一试

例子 6

选择第一个拥有 "target" 属性的 元素：

document.querySelector("a[target]");

亲自试一试

例子 7

选择第一个

或第一个

：

A h3 element


A h4 element

document.querySelector("h3, h4").style.backgroundColor = "red";

亲自试一试

例子 8

选择第一个

或第一个

：

A h4 element


A h3 element

document.querySelector("h3, h4").style.backgroundColor = "red";

亲自试一试

语法

document.querySelector(cssSelectors)

参数

参数 ဖော်ပြ
cssSelectors

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

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

ပြည့်စုံ အသုံးပြုခြင်း အချက်အလက် ကို ကျမ်းဂျိုး ကို ကြည့်ပါ。 CSS ရှာဖွေကြောင်း စာရင်း。

အချို့တိုင်း ရှာဖွေသူများ အကြား ကို ကြားနှုန်းဖြင့် လျှောက်ပြခြင်း (ကျမ်းဂျိုးပေါ်တွင် အမှတ်ပြုထားသော အကျိုးမရှိဘဲ ကြည့်ပါ)。

ပြန်လည်ပေးသော အရာ

အမျိုးအစား ဖော်ပြ
အရာဝတ္တု

CSS ရှာဖွေသူ နှင့် ကိုက်ညီသော ပထမဆုံး အရာဝတ္တုကို ပါဝင်သော NodeList。

တွေ့သော အကျိုးမရှိဘဲ မှာ null ပြန်လည်ပေးသည်。

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.querySelector() သည် DOM Level 1 (1998) ကို သတ်မှတ်ထားသော အခြေအနေ ဖြစ်ပါသည်。

    အားလုံး ဘရာဇီးနီးယား သတင်း

    Chrome IE Edge Firefox Safari Opera
    Chrome IE Edge Firefox Safari Opera
    ထောက်ပံ့ 9-11 ထောက်ပံ့ ထောက်ပံ့ ထောက်ပံ့ ထောက်ပံ့

    ပါးစပ်သတင်း

    ပါးစပ်

    CSS ရှာဖွေကြောင်း

    CSS ရှာဖွေကြောင်း စာရင်း

    HTML DOM NodeList စာရင်း

    QuerySelector နည်းလမ်း：

    querySelector() နည်းလမ်း

    querySelectorAll() နည်းလမ်း

    GetElement နည်းလမ်း：

    getElementById() နည်းလမ်း

    getElementsByTagName() နည်းလမ်း

    getElementsByClassName() နည်းလမ်း