getElementsByClassName()
Misol
class="example" bo‘lgan barcha elementlarni oling:
const collection = document.getElementsByClassName("example");
O‘zingiz sinab ko‘ring »
"example" va "color" klasslarining ikkalasiga ham ega barcha elementlarni oling:
const collection = document.getElementsByClassName("example color");
O‘zingiz sinab ko‘ring »
Quyida ko‘proq misollar.
Tavsif
getElementsByClassName() metodi belgilangan klass nomi(lari)ga ega elementlar kolleksiyasini qaytaradi.
getElementsByClassName() metodi HTMLCollection qaytaradi.
HTMLCollection
HTMLCollection — HTML elementlarning massivsimon kolleksiyasi (ro‘yxati).
length xususiyati kolleksiyadagi elementlar sonini qaytaradi.
Elementlarga indeks orqali murojaat qilish mumkin (0 dan boshlanadi).
HTMLCollection jonli (live) bo‘ladi. Hujjat o‘zgarganda u avtomatik ravishda yangilanadi.
Shuningdek qarang:
Sintaksis
document.getElementsByClassName(classname)
Parametrlar
| Parametr | Tavsif |
| classname | Majburiy. Elementlarning klass nomi. Bir nechta klass nomini qidirish uchun ularni "test demo" kabi bo‘sh joy bilan ajrating. |
Qaytariladigan qiymat
| Tip | Tavsif |
| Obyekt. | HTMLCollection obyekti. Belgilangan klass nomiga ega elementlar kolleksiyasi. Elementlar hujjatda joylashgan tartibda saralangan. |
Ko‘proq misollar
class="example" bo‘lgan elementlar soni:
let numb = document.getElementsByClassName("example").length;
O‘zingiz sinab ko‘ring »
class="example" bo‘lgan barcha elementlarning fon rangini o‘zgartiring:
const collection = document.getElementsByClassName("example");
for (let i = 0; i < collection.length; i++) {
collection[i].style.backgroundColor = "red";
}
O‘zingiz sinab ko‘ring »
Tegishli sahifalar
CSS darsligi: CSS sintaksisi
CSS ma’lumotnomasi: CSS .class selektori
HTML DOM ma’lumotnomasi: element.getElementsByClassName()
HTML DOM ma’lumotnomasi: className xususiyati
HTML DOM ma’lumotnomasi: classList xususiyati
HTML DOM ma’lumotnomasi: Style obyekti
Brauzerlarda qo‘llab-quvvatlash
document.getElementsByClassName() — DOM Level 1 (1998) imkoniyati.
U barcha brauzerlarda to‘liq qo‘llab-quvvatlanadi:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Ha | Ha | Ha | Ha | Ha | 9-11 |
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!