JavaScript/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