createDocumentFragment()
Misollar
Bo‘sh ro‘yxatga elementlar qo‘shing:
const fruits = ["Banana", "Orange", "Mango"];
// Create a document fragment:
const dFrag = document.createDocumentFragment();
// Add li elements to the fragment:
for (let x in fruits) {
const li = document.createElement('li');
li.textContent = fruits[x];
dFrag.appendChild(li);
}
// Add fragment to a list:
document.getElementById('myList').appendChild(dFrag);
O‘zingiz sinab ko‘ring »
Mavjud ro‘yxatga elementlar qo‘shing:
const fruits = ["Banana", "Orange", "Mango"];
// Create a document fragment:
const dFrag = document.createDocumentFragment();
// Add li elements to the fragment:
for (let x in fruits) {
const li = document.createElement('li');
li.textContent = fruits[x];
dFrag.appendChild(li);
}
// Add fragment to a list:
document.getElementById('myList').appendChild(dFrag);
O‘zingiz sinab ko‘ring »
Tavsif
createDocumentFragment() metodi ekrandan tashqari (offscreen) tugun yaratadi.
Ekrandan tashqari tugun yordamida istalgan hujjatga joylashtirish mumkin bo‘lgan yangi hujjat fragmentini qurish mumkin.
createDocumentFragment() metodi hujjatning qismlarini ajratib olish, tarkibning bir qismini o‘zgartirish, qo‘shish yoki o‘chirish va uni hujjatga qaytarib joylashtirish uchun ham ishlatilishi mumkin.
Eslatma
HTML elementlarni har doim to‘g‘ridan-to‘g‘ri tahrirlashingiz mumkin. Ammo yaxshiroq usul — (ekrandan tashqari) hujjat fragmentini qurib, u tayyor bo‘lganda uni real (jonli) DOM’ga biriktirish. Fragment tayyor bo‘lganda joylashtirilgani uchun faqat bitta qayta joylashtirish (reflow) va bitta render bo‘ladi.
Agar HTML elementlarni siklda qo‘shmoqchi bo‘lsangiz, hujjat fragmentlaridan foydalanish unumdorlikni ham oshiradi.
Ogohlantirish!
Hujjat fragmentiga qo‘shilgan hujjat tugunlari asl hujjatdan olib tashlanadi.
Sintaksis
document.createDocumentFragment()
Parametrlar
| YO‘Q |
Qaytariladigan qiymat
| Tip | Tavsif |
| Node | Yaratilgan DocumentFragment tuguni. |
Brauzerlarda qo‘llab-quvvatlash
document.createComment() — 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!