HTML DOM Element querySelector() စက်ဆုံး

定义和用法

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

注意：

querySelector() 方法只返回与指定选择器匹配的第一个元素。如需返回所有匹配项，请改用 querySelectorAll() 方法.

另请参阅：

参考手册：

classList 属性

className 属性

querySelectorAll() 方法

getElementsByTagName() 方法

getElementsByClassName() 方法

HTML DOM Style အဖွဲ့

教程：

CSS နည်းပုံ

CSS ရှာဖွေသူ

CSS ရှာဖွေသူ ကိုးကွယ်ချက်

实例

例子 1

更改

元素中 class="example" 的第一个子元素的文本：

var x = document.getElementById("myDIV");
x.querySelector(".example").innerHTML = "Hello World!";

亲自试一试

页面下方提供更多实例。

语法

element.querySelector(CSSselectors)

参数

参数 描述
CSSselectors

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

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

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

ပြန်လည်ပေးသော အစိတ်များသည် အခြေခံ စာတမ်းတွင် ပထမပါဝင်သော အစိတ်ကို ဖြစ်သည် (အောက်ပါ "ပိုမိုလုပ်ငန်း" ကို ကြည့်ပါ)。

အကြောင်းကြား:ပြည့်စုံသော CSS ရှာဖွေသူ စာရင်းကို ကျွန်ုပ်၏ CSS ရှာဖွေသူ ကိုးကွယ်ချက်.

နည်းပါးလျှင်

ပြန်လည်ပေးသော အရင်းအမြစ်:

သတ်မှတ်ထားသော CSS ရှာဖွေသူအား တွေ့သော ပထမ အစိတ်ကို ပြန်လည်ပေးသည်。

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

သတ်မှတ်ထားသော ရှာဖွေသူမှာ မမှန်မဟုတ် လျှင် SYNTAX_ERR အမှားပေါ်ပေါ်ကျသည်。
DOM ပုံစံ: Selectors Level 1 Element Object

ပိုမိုလုပ်ငန်း

အမှတ် 2 လုပ်ငန်း

ပြောင်းလဲတုပ် <div> အစိတ်တွင် ပထမ <p> အစိတ်များ အချက်အလက်များ:

var x = document.getElementById("myDIV");
x.querySelector("p").innerHTML = "Hello World!";

亲自试一试

အမှတ် 3 လုပ်ငန်း

ပြောင်းလဲတုပ် <div> အစိတ် class="example" တွင် ပထမ <p> အစိတ်များ အချက်အလက်များ:

var x = document.getElementById("myDIV");
x.querySelector("p.example").innerHTML = "Hello World!";

亲自试一试

အမှတ် 4 လုပ်ငန်း

ပြောင်းလဲတုပ် <div> အစိတ် id="demo" တွင် အချက်အလက်များ:

var x = document.getElementById("myDIV");
x.querySelector("#demo").innerHTML = "Hello World!";

亲自试一试

例子 5

为

元素内设置 target 属性的第一个 元素添加红色边框：

var x = document.getElementById("myDIV");
x.querySelector("a[target]").style.border = "10px solid red";

亲自试一试

例子 6

此例演示多个选择器是如何工作的。

假设您有两个元素：

和

元素。

以下代码将为

中的第一个

元素添加背景颜色：


  
A h2 element

  
A h3 element



var x = document.getElementById("myDIV");
x.querySelector("h2, h3").style.backgroundColor = "red";

亲自试一试

例子 7

但是，如果

中的

元素放置在

元素之前。

元素将获得红色背景色。


  
A h3 element

  
A h2 element



var x = document.getElementById("myDIV");
x.querySelector("h2, h3").style.backgroundColor = "red";

亲自试一试

浏览器支持

表中的数字注明了首个完全支持该方法的浏览器版本。

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

ကိုးကားသည် စာမေးသတ္တပုံ

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

CSS လက်တွေးကြည့်ချက်：CSS ရှာဖွေသူ ကိုးကွယ်ချက်

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

JavaScript လက်တွေးကြည့်ချက်：document.querySelector()

JavaScript လက်တွေးကြည့်ချက်：element.querySelectorAll()

HTML DOM လက်တွေးကြည့်ချက်：document.querySelectorAll()