querySelector()
Misol
<div> elementidagi class="example" bo‘lgan birinchi bola elementning matnini o‘zgartiring:
var x = document.getElementById("myDIV");
x.querySelector(".example").innerHTML = "Hello World!";
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Tavsif
querySelector() metodi elementning ko‘rsatilgan CSS selektor(lar)iga mos keladigan birinchi bola elementini qaytaradi.
Eslatma: querySelector() metodi ko‘rsatilgan selektorlarga mos keladigan faqat birinchi elementni qaytaradi. Barcha mos elementlarni qaytarish uchun uning o‘rniga querySelectorAll() metodidan foydalaning.
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar metodni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Metod | |||||
|---|---|---|---|---|---|
| querySelector() | 4.0 | 8.0 | 3.5 | 3.2 | 10.0 |
Sintaksis
element.querySelector(CSS selectors)
Parametr qiymatlari
| Parametr | Tip | Tavsif |
|---|---|---|
| CSS selectors | String | Majburiy. Elementga moslikni tekshirish uchun bir yoki bir nechta CSS selektorini belgilaydi. Ular HTML elementlarni id, klasslari, turlari, atributlari, atribut qiymatlari va hokazolar bo‘yicha tanlash uchun ishlatiladi. Bir nechta selektor bo‘lsa, har birini vergul bilan ajrating. Qaytariladigan element hujjatda qaysi element birinchi topilishiga bog‘liq ("Ko‘proq misollar" bo‘limiga qarang). Maslahat: Barcha CSS selektorlari ro‘yxati uchun CSS selektorlari ma’lumotnomasiga qarang. |
Texnik tafsilotlar
| DOM versiyasi: | Selectors Level 1 Element obyekti |
|---|---|
| Qaytariladigan qiymat: | Ko‘rsatilgan CSS selektor(lar)iga mos keladigan birinchi element. Moslik topilmasa, null qaytariladi. Ko‘rsatilgan selektor(lar) noto‘g‘ri bo‘lsa, SYNTAX_ERR istisnosi yuzaga keladi. |
Ko‘proq misollar
Misol
<div> elementidagi birinchi <p> elementining matnini o‘zgartiring:
var x = document.getElementById("myDIV");
x.querySelector("p").innerHTML = "Hello World!";
O‘zingiz sinab ko‘ring »
Misol
<div> elementidagi class="example" bo‘lgan birinchi <p> elementining matnini o‘zgartiring:
var x = document.getElementById("myDIV");
x.querySelector("p.example").innerHTML = "Hello World!";
O‘zingiz sinab ko‘ring »
Misol
<div> elementidagi id="demo" bo‘lgan elementning matnini o‘zgartiring:
var x = document.getElementById("myDIV");
x.querySelector("#demo").innerHTML = "Hello World!";
O‘zingiz sinab ko‘ring »
Misol
<div> elementi ichidagi target atributiga ega birinchi <a> elementiga qizil chegara qo‘shing:
var x = document.getElementById("myDIV");
x.querySelector("a[target]").style.border = "10px solid red";
O‘zingiz sinab ko‘ring »
Misol
Bu misol bir nechta selektor qanday ishlashini ko‘rsatadi.
Faraz qiling, sizda ikkita element bor: <h2> va <h3> elementi.
Quyidagi kod <div> ichidagi birinchi <h2> elementiga fon rangi qo‘shadi:
<div id="myDIV">
<h2>A h2 element</h2>
<h3>A h3 element</h3>
</div>
var x = document.getElementById("myDIV");
x.querySelector("h2, h3").style.backgroundColor = "red";
O‘zingiz sinab ko‘ring »
Biroq, agar <div> ichida <h3> elementi <h2> elementidan oldin joylashgan bo‘lsa, qizil fon rangini aynan <h3> elementi oladi.
<div id="myDIV">
<h3>A h3 element</h3>
<h2>A h2 element</h2>
</div>
var x = document.getElementById("myDIV");
x.querySelector("h2, h3").style.backgroundColor = "red";
O‘zingiz sinab ko‘ring »
Tegishli sahifalar
CSS darsligi: CSS selektorlari
CSS ma’lumotnomasi: CSS selektorlari ma’lumotnomasi
JavaScript darsligi: JavaScript HTML DOM tugunlar ro‘yxati (Node List)
JavaScript ma’lumotnomasi: document.querySelector()
JavaScript ma’lumotnomasi: element.querySelectorAll()
HTML DOM ma’lumotnomasi: document.querySelectorAll()
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!