HTML DOMTokenList
DOMTokenList
DOMTokenList — bo‘sh joy bilan ajratilgan tokenlar to‘plami.
DOMTokenList elementlariga indeks orqali murojaat qilish mumkin (0 dan boshlanadi).
length xususiyati DOMTokenList’dagi tokenlar sonini qaytaradi.
Eslatma
HTML elementining classList xususiyati DOMTokenList’ni ifodalaydi.
DOMTokenList xususiyatlari va metodlari
| Nomi | Tavsif |
|---|---|
| add() | Ro‘yxatga bir yoki bir nechta token qo‘shadi |
| contains() | Ro‘yxatda klass mavjud bo‘lsa, true qaytaradi |
| entries() | Ro‘yxatdagi kalit/qiymat juftliklariga ega Iterator qaytaradi |
| forEach() | Ro‘yxatdagi har bir token uchun callback funksiyasini bajaradi |
| item() | Ko‘rsatilgan indeksdagi tokenni qaytaradi |
| keys() | Ro‘yxatdagi kalitlarga ega Iterator qaytaradi |
| length | Ro‘yxatdagi tokenlar sonini qaytaradi |
| remove() | Ro‘yxatdan bir yoki bir nechta tokenni olib tashlaydi |
| replace() | Ro‘yxatdagi tokenni almashtiradi |
| supports() | Token atribut qo‘llab-quvvatlaydigan tokenlardan biri bo‘lsa, true qaytaradi |
| toggle() | Ro‘yxatdagi tokenlarni navbatma-navbat qo‘shadi yoki olib tashlaydi (toggle) |
| value | Tokenlar ro‘yxatini string sifatida qaytaradi |
| values() | Ro‘yxatdagi qiymatlarga ega Iterator qaytaradi |
Misollar
Elementga "myStyle" klassini qo‘shing:
element.classList.add("myStyle");
O‘zingiz sinab ko‘ring »
Elementdan "myStyle" klassini olib tashlang:
element.classList.remove("myStyle");
O‘zingiz sinab ko‘ring »
"myStyle" klassini yoqib-o‘chiring (toggle):
element.classList.toggle("myStyle");
O‘zingiz sinab ko‘ring »
Quyida ko‘proq misollar.
Massiv emas
DOMTokenList massiv (Array) emas!
DOMTokenList massivga o‘xshab ko‘rinishi mumkin, lekin u massiv emas.
DOMTokenList’ni sikl orqali aylanib chiqishingiz va uning tokenlariga indeks orqali murojaat qilishingiz mumkin.
Lekin DOMTokenList’da push(), pop() yoki join() kabi Array metodlaridan foydalana olmaysiz.
Elementga bir nechta klass qo‘shing:
element.classList.add("myStyle", "anotherClass", "thirdClass");
O‘zingiz sinab ko‘ring »
Elementdan bir nechta klassni olib tashlang:
element.classList.remove("myStyle", "anotherClass", "thirdClass");
O‘zingiz sinab ko‘ring »
Elementning klass nomlari sonini oling:
let numb = element.classList.length;
O‘zingiz sinab ko‘ring »
"myDIV" elementining klass nomlarini oling:
<div id="myDIV" class="myStyle anotherClass thirdClass">
<p>I am myDIV.</p>
</div>
const list = document.getElementById("myDIV").classList;
O‘zingiz sinab ko‘ring »
Elementning birinchi klassini oling:
let className = element.classList.item(0);
O‘zingiz sinab ko‘ring »
Elementda "myStyle" klassi bormi?
let x = element.classList.contains("myStyle");
O‘zingiz sinab ko‘ring »
Agar elementda "myStyle" klassi bo‘lsa, "anotherClass" klassini olib tashlang.
if (element.classList.contains("mystyle")) {
element.classList.remove("anotherClass");
}
O‘zingiz sinab ko‘ring »
Ochiladigan menyu (dropdown) tugmasini yaratish uchun klasslarni navbatma-navbat almashtiring:
document.getElementById("myBtn").onclick = function() {myFunction()};
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
O‘zingiz sinab ko‘ring »
Yopishqoq (sticky) navigatsiya panelini yarating:
// Get the navbar
const navbar = document.getElementById("navbar");
// Get the offset position of the navbar
const sticky = navbar.offsetTop;
// Add the sticky class to the navbar when you reach its scroll position
// Remove it when you leave the scroll position
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!