HTML DOM Document createDocumentFragment() পদ্ধতি

সংজ্ঞা ও ব্যবহার

createDocumentFragment() পদ্ধতি একটি offscreen নোড তৈরি করে。

offscreen নোডটি কোনও ডকুমেন্টে যোগ করা যাওয়া নতুন ডকুমেন্টফ্র্যাগমেন্ট তৈরি করার জন্য ব্যবহার করা যায়。

createDocumentFragment() এই পদ্ধতিটি ডকুমেন্টের অংশবিশেষ, পরিবর্তন, যোগ করা বা অপসারিত করা কিছু করা এবং তা ডকুমেন্টে পুনরায় যোগ করার জন্যও ব্যবহার করা যায়。

সুঝাওয়া

আপনি সরাসরি HTML ইউনিট সম্পাদন করতে পারেন। কিন্তু সবচেয়ে ভালো পদ্ধতি হল অফস্ক্রিন ডকুমেন্টফ্র্যাগমেন্ট তৈরি করা এবং তা প্রস্তুত হওয়ার পর তা সত্যিকারী (সক্রিয়) DOM-এ যোগ করা। কারণ আপনি যখন ফ্র্যাগমেন্টকে প্রস্তুত করেন, তখন ফ্র্যাগমেন্টকে যোগ করার সময় কেবল একবার পুনর্গঠন এবং একবার প্রদর্শন হবে。

আপনি যদি ব্যাক্তিগতভাবে HTML ইউনিট যোগ করতে চান, তবে ডকুমেন্টফ্র্যাগমেন্ট ব্যবহার করে কার্যকর হতে পারে কার্যকরতা বৃদ্ধি করা যাবে。

ধ্যান দিনডকুমেন্ট নোড যা ডকুমেন্টফ্র্যাগমেন্টে যোগ করা হয়েছে, তা মূল ডকুমেন্ট থেকে অপসারিত হবে。

প্রকাশ

উদাহরণ 1

ইউনিটকে খালি তালিকায় যোগ করুন:

const fruits = ["Banana", "Orange", "Mango"];
// ডকুমেন্টফ্র্যাগমেন্ট তৈরি করুন:
const dFrag = document.createDocumentFragment();
// li ইউনিটকে স্প্লাইটে যোগ করুন:
for (let x in fruits) {
  const li = document.createElement('li');
  li.textContent = fruits[x];
  dFrag.appendChild(li);
}
// স্প্লাইটকে তালিকায় যোগ করুন:
document.getElementById('myList').appendChild(dFrag);

আপনার হাতে পরীক্ষা করুন

উদাহরণ 2

ইউনিটকে সহজভাবে চিহ্নিত তালিকায় যোগ করুন:

const fruits = ["Banana", "Orange", "Mango"];
// ডকুমেন্টফ্র্যাগমেন্ট তৈরি করুন:
const dFrag = document.createDocumentFragment();
// li ইউনিটকে স্প্লাইটে যোগ করুন:
for (let x in fruits) {
  const li = document.createElement('li');
  li.textContent = fruits[x];
  dFrag.appendChild(li);
}
// স্প্লাইটকে তালিকায় যোগ করুন:
document.getElementById('myList').appendChild(dFrag);

আপনার হাতে পরীক্ষা করুন

ব্যবহার কর্মসূচি

document.createDocumentFragment()

প্রামাণ্যপত্র

নেই。

ফলাফল

ধরন বর্ণনা
নোড নতুন তৈরি করা ডকুমেন্টফ্র্যাগমেন্ট নোড, কোনও সাব-নোড নেই。

ব্রাউজার সমর্থন

document.createComment() হলো DOM Level 1 (1998) এর বৈশিষ্ট্য。

সমস্ত ব্রাউজারকে সমর্থন করে:

চ্রোম আইই এজ ফায়ারফক্স স্যাফারি অপেরা
চ্রোম আইই এজ ফায়ারফক্স স্যাফারি অপেরা
সমর্থন 9-11 সমর্থন সমর্থন সমর্থন সমর্থন