HTML DOM ایلی کیم وارضی 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 ورژن: Selector 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";

亲自试一试

浏览器支持

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

کروم ایجی فائرفاکس سافری اپرا
کروم ایجی فائرفاکس سافری اپرا
4.0 8.0 3.5 3.2 10.0

مرتبط پیج

CSS تربیت:CSS کا انتخاب کنندہ

CSS مراجعہ کتاب:CSS کا انتخاب کنندہ مرجع دستاویز

جاوا اسکریپٹ تربیت:جاوا اسکریپٹ HTML DOM NodeList

جاوا اسکریپٹ مراجعہ کتاب:document.querySelector()

جاوا اسکریپٹ مراجعہ کتاب:element.querySelectorAll()

HTML DOM مراجعہ کتاب:document.querySelectorAll()