getElementsByClassName()
Misollar
class="child" bo‘lgan birinchi ro‘yxat bandining matnini o‘zgartiring:
const list = document.getElementsByClassName("example")[0];
list.getElementsByClassName("child")[0].innerHTML = "Milk";
O‘zingiz sinab ko‘ring »
"myDIV" elementidagi class="child" bo‘lgan elementlar soni:
const element = document.getElementById("myDIV");
const nodes = element.getElementsByClassName("child");
let number = nodes.length;
O‘zingiz sinab ko‘ring »
class="child" bo‘lgan ikkinchi elementning o‘lchamini o‘zgartiring:
const element = document.getElementById("myDIV");
element.getElementsByClassName("child")[1].style.fontSize = 24px";
O‘zingiz sinab ko‘ring »
Quyida ko‘proq misollar.
Tavsif
getElementsByClassName() metodi berilgan klass nomiga ega barcha bola elementlar kolleksiyasini qaytaradi.
getElementsByClassName() metodi jonli (live) 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:
Darsliklar:
Sintaksis
element.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 ikkinchi element ichidagi "child" va "color" klasslariga ega birinchi elementning o‘lchamini o‘zgartiring:
const elements = document.getElementsByClassName("example")[1];
elements.getElementsByClassName("child color")[0].style.fontSize = "24px";
O‘zingiz sinab ko‘ring »
"myDIV" ichidagi class="child" bo‘lgan barcha elementlarning rangini o‘zgartiring:
const element = document.getElementById("myDIV");
const nodes = element.getElementsByClassName("child");
for (let i = 0; i < nodes.length; i++) {
nodes[i].style.color = "red";
}
O‘zingiz sinab ko‘ring »
Brauzerlarda qo‘llab-quvvatlash
element.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!