الفرق بين المراجعتين ل"JavaScript/Document/createDocumentFragment"
< JavaScript | Document
اذهب إلى التنقل
اذهب إلى البحث
ط (←مثال) |
ط (←وصف) |
||
| (3 مراجعات متوسطة بواسطة نفس المستخدم غير معروضة) | |||
| سطر 7: | سطر 7: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| − | + | ===<code>fragment</code>=== | |
| − | + | مرجِع يُشير إلى كائن فارغ من النّوع <code>[[JavaScript/DocumentFragment | DocumentFragment]]</code>. | |
==وصف== | ==وصف== | ||
كائنات <code>[[JavaScript/DocumentFragment | DocumentFragment]]</code> هي عقدُ DOM. ولا تكون أبدًا جزءًا من شجرة DOM الأساسيّة. الغرض منها يكون عادةً إنشاء قطعة مُستندٍ (document fragment) ثمّ إضافة عناصرَ إليها، ثمّ إضافة قطعة المُستند إلى شجرة DOM. وتُبدَلُ قطعة المستند في شجرة DOM بجميع أولادها. | كائنات <code>[[JavaScript/DocumentFragment | DocumentFragment]]</code> هي عقدُ DOM. ولا تكون أبدًا جزءًا من شجرة DOM الأساسيّة. الغرض منها يكون عادةً إنشاء قطعة مُستندٍ (document fragment) ثمّ إضافة عناصرَ إليها، ثمّ إضافة قطعة المُستند إلى شجرة DOM. وتُبدَلُ قطعة المستند في شجرة DOM بجميع أولادها. | ||
| − | ولأنّ قطعة المُستند تُخزَّن في الذّاكرة ولا تكون جزءًا من شجرة DOM الرّئيسيّة، فإضافة أولاد إليها لا يُسبّب | + | ولأنّ قطعة المُستند تُخزَّن في الذّاكرة ولا تكون جزءًا من شجرة DOM الرّئيسيّة، فإضافة أولاد إليها لا يُسبّب إعادة تدفّقٍ في الصّفحة ([https://developers.google.com/speed/docs/insights/browser-reflow?csw=1 reflow]، الذي يتعلّق بحساب وهندسة موقع العنصر). وبالتّالي فاستعمال قطع المُستند يسمح بالحصول على [http://ejohn.org/blog/dom-documentfragments/ أداء أفضل]. |
==مثال== | ==مثال== | ||
| سطر 25: | سطر 25: | ||
في جزء JavaScript نضع: | في جزء JavaScript نضع: | ||
<syntaxhighlight lang="javascript"> | <syntaxhighlight lang="javascript"> | ||
| − | var element = document.getElementById('ul'); // بافتراض أنّ العنصر | + | var element = document.getElementById('ul'); // بافتراض أنّ العنصر موجود |
var fragment = document.createDocumentFragment(); | var fragment = document.createDocumentFragment(); | ||
var browsers = ['Firefox', 'Chrome', 'Opera', | var browsers = ['Firefox', 'Chrome', 'Opera', | ||
المراجعة الحالية بتاريخ 06:50، 25 مارس 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'); // بافتراض أنّ العنصر موجود
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