HTML DOM Element querySelector() ਮੈਥਡ

ਵਿਆਖਿਆ ਅਤੇ ਵਰਤੋਂ

querySelectorAll() ਮੱਥਾ ਨਾਲ ਐਲੀਮੈਂਟ ਦੇ ਨਿਰਦਿਸ਼ਤ CSS ਚੋਣਕਰਤੇ ਨਾਲ ਮੇਲ ਕਰਨ ਵਾਲੇ ਪਹਿਲੇ ਸ਼ਾਖਾ ਐਲੀਮੈਂਟ ਵਾਪਸ ਦੇਣਗੇ。

ਧਿਆਨ:

querySelectorAll() ਮੱਥਾ ਕੇਵਲ ਨਿਰਦਿਸ਼ਤ ਚੋਣਕਰਤੇ ਨਾਲ ਮੇਲ ਕਰਨ ਵਾਲੇ ਪਹਿਲੇ ਐਲੀਮੈਂਟ ਵਾਪਸ ਦੇਣਗੇ।ਜੇਕਰ ਸਾਰੇ ਮੇਲ ਕਰਨ ਵਾਲੇ ਐਲੀਮੈਂਟਾਂ ਨੂੰ ਵਾਪਸ ਦੇਣਾ ਹੈ ਤਾਂ querySelectorAll() ਮੱਥਦਾ.

ਇਸ ਦੇ ਨਾਲ ਵੀ ਦੇਖੋ:

ਸੂਚਨਾਕੀਤਾਕਾਰ

classList ਗੁਣ

className ਗੁਣ

querySelectorAll() ਮੱਥਦਾ

getElementsByTagName() ਮੱਥਦਾ

getElementsByClassName() ਮੱਥਦਾ

ایچ تی ایم ال ڈوم اسٹائل آوبجیکٹ

ਸਿੱਖਿਆ:

CSS ਗਰੰਥ ਸ਼ਾਸਤਰ

CSS ਚੋਣਕਾਰ

CSS ਚੋਣਕਾਰ ਸੰਦਰਭ ਗ੍ਰੰਥ

ਉਦਾਹਰਣ

ਉਦਾਹਰਣ 1

ਸੋਧ <div> ਐਲੀਮੈਂਟ ਵਿੱਚ class="example" ਦੇ ਪਹਿਲੇ ਸ਼ਾਖਾ ਐਲੀਮੈਂਟ ਦਾ ਟੈਕਸਟ:

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

亲自试一试

ਪੰਨੇ ਦੇ ਹੇਠਾਂ ਹੋਰ ਉਦਾਹਰਣ ਮਿਲਣਗੇ。

ਸਿਧਾਂਤ

element.querySelector(CSSselectors)

ਪੈਰਾਮੀਟਰ

ਪੈਰਾਮੀਟਰ ਵਰਣਨ
CSSselectors

ਲਾਜ਼ਮੀ। ਸਟਰਿੰਗ। ਇੱਕ ਜਾਂ ਕਈ CSS ਚੋਣਕਰਤਾਵਾਂ ਨੂੰ ਦੱਸਣ ਲਈ ਦੱਸੋ。

CSS ਚੋਣਕਰਤਾ ਐਲੀਮੈਂਟਾਂ ਨੂੰ ਆਧਾਰਿਤ ਕਰਕੇ ਚੁਣਦੀ ਹੈ ਜੋ id, class, ਤਰਾਂ, ਗੁਣ, ਗੁਣ ਮੁੱਲ ਆਦਿ ਦੇ ਰੂਪ ਵਿੱਚ ਹੁੰਦੇ ਹਨ。

ਕਈ ਚੋਣਕਰਤਾਵਾਂ ਲਈ ਹਰੇਕ ਚੋਣਕਰਤੇ ਨੂੰ ਕੋਮਾ ਨਾਲ ਵੰਡੋ。

ਵਾਪਸ ਦਿੱਤੇ ਗਏ ਐਲੀਮੈਂਟ ਦਾ ਚੋਣਕਰਤਾ ਪਹਿਲਾ ਨਾਲ ਹੀ ਦੋਸ਼ਿਤ ਹੁੰਦਾ ਹੈ (ਹੇਠ ਵਿੱਚ "ਹੋਰ ਉਦਾਹਰਣ" ਦੇਖੋ).

ਸੁਝਾਅ:ਪੂਰੀ CSS ਚੋਣਕਰਤਾ ਸੂਚੀ ਲਈ ਅਸੀਂ ਦੀਆਂ ਦੇਖੋ: CSS ਚੋਣਕਾਰ ਸੰਦਰਭ ਗ੍ਰੰਥ.

ਤਕਨੀਕੀ ਵੇਰਵਾ

ਵਾਪਸ ਦਿੱਤਾ ਗਿਆ ਮੁੱਲ:

ਨਿਰਦਿਸ਼ਤ CSS ਚੋਣਕਰਤੇ ਦਾ ਪਹਿਲਾ ਐਲੀਮੈਂਟ ਮੇਲ ਕਰੋ。

ਜੇਕਰ ਮੇਲ ਨਹੀਂ ਮਿਲਦਾ ਹੈ ਤਾਂ null ਵਾਪਸ ਦੇਣਾ。

ਜੇਕਰ ਨਿਰਦਿਸ਼ਤ ਚੋਣਕਰਤਾ ਬੇਕਾਰ ਹੈ ਤਾਂ ਸ਼ੁੱਧਾ ਸਿੰਟੈਕਸ_ਐਰਰ ਅਨੈਕਸ਼ਨ ਫਲਾਈਨ ਕਰੋ。
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()