Document.createDocumentFragment()‎

من موسوعة حسوب
< JavaScript‏ | Document
مراجعة 16:12، 24 مارس 2018 بواسطة عبد-الهادي-الديوري (نقاش | مساهمات) (إضافة الصّفحة)
(فرق) → مراجعة أقدم | المراجعة الحالية (فرق) | مراجعة أحدث ← (فرق)
اذهب إلى التنقل اذهب إلى البحث

يُنشئُ التّابع Document.createDocumentFragment()‎ كائنا فارغًا من النّوع DocumentFragment.

البنية العامة

var fragment = document.createDocumentFragment();
  • fragment
مرجِع يُشير إلى كائن فارغ من النّوع DocumentFragment.

وصف

كائنات DocumentFragment هي عقدُ DOM. ولا تكون أبدًا جزءًا من شجرة DOM الأساسيّة. الغرض منها يكون عادةً إنشاء قطعة مُستندٍ (document fragment) ثمّ إضافة عناصرَ إليها، ثمّ إضافة قطعة المُستند إلى شجرة DOM. وتُبدَلُ قطعة المستند في شجرة DOM بجميع أولادها.

ولأنّ قطعة المُستند تُخزَّن في الذّاكرة ولا تكون جزءًا من شجرة DOM الرّئيسيّة، فإضافة أولاد إليها لا يُسبّب انحسار الصّفحة (reflow، الذي يتعلّق بحساب وهندسة موقع العنصر). وبالتّالي فاستعمال قطع المُستند يسمح بالحصول على أداء أفضل.

مثال

هذا المثال يُنشئ قائمةً بمتصفّحات الويب المعروفة.

في جزء HTML نضع:

<ul id="ul">
</ul>

في جزء JavaScript نضع:

var element  = document.getElementById('ul'); // assuming ul exists
var fragment = document.createDocumentFragment();
var browsers = ['Firefox', 'Chrome', 'Opera', 
    'Safari', 'Internet Explorer'];

browsers.forEach(function(browser) {
    var li = document.createElement('li');
    li.textContent = browser;
    fragment.appendChild(li);
});

element.appendChild(fragment);

دعم المتصفحات

الميزة Chrome Internet Explorer Firefox Opera Safari
الدعم الأساسي نعم نعم نعم نعم نعم

مصادر ومواصفات

  • مواصفة DOM