আমি কি ডকুমেন্ট.ক্রিয়েট ডকুমেন্টফ্রেগমেন্ট বা ডকুমেন্ট.ক্রেটএলিমেন্ট ব্যবহার করব

Question 1

আমি নথির টুকরো টুকরো টুকরো সম্পর্কে জানতে এবং ডিওএম রিফ্লো নিয়ে ভাবছিলাম যে এটির document.createDocumentFragmentথেকে পৃথক document.createElementহওয়া কেমন দেখায় যতক্ষণ না আমি তাদের ডিওএম উপাদানগুলিতে সংযুক্ত করি না কেন এগুলির দুটিই বিদ্যমান নেই।

আমি একটি পরীক্ষা করেছিলাম (নীচে) এবং তাদের সবাই ঠিক একই পরিমাণ সময় নিয়েছিল (প্রায় 95 মিমি)। অনুমান হিসাবে এটি সম্ভবত উপাদানগুলির কোনওটিতে কোনও স্টাইল প্রয়োগ না হওয়ার কারণে হতে পারে, তাই কোনও পুনর্বিবেচনা নাও হতে পারে।

যাইহোক, নীচের উদাহরণের উপর ভিত্তি করে, DOM OMোকানোর সময় কেন আমি এর createDocumentFragmentপরিবর্তে ব্যবহার করব createElementএবং উভয়ের মধ্যে পার্থক্য কী।

var htmz = "<ul>";
for (var i = 0; i < 2001; i++) {
    htmz += '<li><a href="#">link ' + i + '</a></li>';
}
htmz += '<ul>';

//createDocumentFragment
console.time('first');
var div = document.createElement("div");
div.innerHTML = htmz;
var fragment = document.createDocumentFragment();
while (div.firstChild) {
    fragment.appendChild(div.firstChild);
}
$('#first').append(fragment);
console.timeEnd('first');

//createElement
console.time('second');
var span = document.createElement("span");
span.innerHTML = htmz;
$('#second').append(span);
console.timeEnd('second');


//jQuery
console.time('third');
$('#third').append(htmz);
console.timeEnd('third');

Question 2

পার্থক্যটি হ'ল ডকুমেন্টের খণ্ডটি কার্যকরভাবে অদৃশ্য হয়ে যায় যখন আপনি এটি ডিওমে যুক্ত করেন। যা ঘটে তা হ'ল ডকুমেন্ট খণ্ডের সমস্ত শিশু নোডগুলি ডিওএমের সেই স্থানে areোকানো হয় যেখানে আপনি নথির খণ্ডটি সন্নিবেশ করান এবং নথির খণ্ডটি নিজেই inোকানো হয়নি। খণ্ডটি নিজেই বিদ্যমান রয়েছে তবে এখন কোনও সন্তান নেই।

এটি আপনাকে একই সাথে DOM এ একাধিক নোড সন্নিবেশ করতে দেয়:

var frag = document.createDocumentFragment();
var textNode = frag.appendChild(document.createTextNode("Some text"));
var br = frag.appendChild(document.createElement("br"));
var body = document.body;
body.appendChild(frag);
alert(body.lastChild.tagName); // "BR"
alert(body.lastChild.previousSibling.data); // "Some text"
alert(frag.hasChildNodes()); // false

Question 3

একটি উপাদান এবং একটি নথি খণ্ড তৈরির মধ্যে আরেকটি খুব গুরুত্বপূর্ণ পার্থক্য:

আপনি যখন একটি উপাদান তৈরি করেন এবং এটি ডোমে সংযুক্ত করেন, তখন উপাদানটি ডিওএম এবং সেই সাথে বাচ্চাদের সাথে যুক্ত হয়।

একটি দস্তাবেজের খণ্ডের সাহায্যে, কেবল শিশুরা সংযুক্ত করা হয়।

এর ক্ষেত্রে নিন:

var ul = document.getElementById("ul_test");


// First. add a document fragment:


(function() {
  var frag = document.createDocumentFragment();
  
  
  var li = document.createElement("li");
  li.appendChild(document.createTextNode("Document Fragment"));
  frag.appendChild(li);
  
  ul.appendChild(frag);
  console.log(2);
}());

(function() {
  var div = document.createElement("div");
  
  
  var li = document.createElement("li");
  li.appendChild(document.createTextNode("Inside Div"));
   div.appendChild(li);
  
  ul.appendChild(div);
}());

Sample List:
<ul id="ul_test"></ul>

স্নিপেট প্রসারিত করুন

যার ফলশ্রুতি এই বিকৃত এইচটিএমএল (হোয়াইটস্পেসে যুক্ত)

<ul id="ul_test">
  <li>Document Fragment</li>
  <div><li>Inside Div</li></div>
</ul>