Document.createDocumentFragment()‎

من موسوعة حسوب

يُنشئُ التّابع 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'); // بافتراض أنّ العنصر موجود
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