HTML DOM Document createDocumentFragment() روش

تعریف و استفاده

createDocumentFragment() این روش نود offscreen را ایجاد می‌کند.

نود offscreen می‌تواند برای ساخت DocumentFragment جدیدی که می‌تواند به هر مستند اضافه شود، استفاده شود.

createDocumentFragment() این روش همچنین می‌تواند برای استخراج بخشی از محتوای مستند، تغییر، اضافه کردن یا حذف برخی از محتوا و بازگرداندن آن به مستند استفاده شود.

HTML DOM Document createDocumentFragment() روش

توضیحات

همیشه می‌توانید مستقیماً عناصر HTML را ویرایش کنید. اما بهترین روش این است که DocumentFragment (خارج از صفحه) را بسازید و سپس این قطعه را در زمان آماده بودن به DOM واقعی (فعال) اضافه کنید. زیرا شما در زمان آماده بودن قطعه آن را می‌گذارید، بنابراین فقط یک بار مرتب‌سازی و یک بار رندرینگ نیاز خواهد بود.

اگر می‌خواهید در یک حلقه عناصر HTML را اضافه کنید، استفاده از DocumentFragment می‌تواند عملکرد را بهبود بخشد.توجه:

نود مستند که به DocumentFragment اضافه شده از مستند اصلی حذف خواهد شد.

مثال

مثال 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()

پارامتر

بدون.

نوع توضیح
نود DocumentFragment جدید بدون هیچ فرزند.

پشتیبانی مرورگر

document.createComment() این ویژگی مربوط به DOM Level 1 (1998) است.

همه مرورگرها از آن پشتیبانی می‌کنند:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
پشتیبانی 9-11 پشتیبانی پشتیبانی پشتیبانی پشتیبانی