HTML DOM Document createDocumentFragment() ວິທີກໍານົດ

ການອະທິບາຍ ແລະການນໍາໃຊ້

createDocumentFragment() ວິທີກໍານົດຫຼັກສັດ offscreen.

ຫຼັກສັດ offscreen ສາມາດນຳໃຊ້ເພື່ອສ້າງຫຼັກສັດ DocumentFragment ທີ່ສາມາດສົ່ງໄປໃສ່ໃນເຫຼັກສາໃດໜຶ່ງ.

createDocumentFragment() ວິທີກໍານົດຈະສາມາດນຳໃຊ້ເພື່ອນຳໃຊ້ຫຼັກສາບາງສ່ວນຂອງໂດຍເບິ່ງຫຼັກສາ, ປ່ຽນ, ສົ່ງຫຼັກສາບາງສ່ວນ, ແລະຫຼັງຈາກນັ້ນສົ່ງຫຼັກສັດຫຼັກສາກັບຫຼັກສາ.

ຄຳແນະນຳ

ເຈົ້າສາມາດເຮັດການແກ້ໄຂຫຼັກສະນະ HTML ທັງໝົດ. ແຕ່ວ່າຫຼັກສາທີ່ດີກວ່າແມ່ນສ້າງຫຼັກສັດ DocumentFragment (offscreen) ແລະໃຫ້ຫຼັກສັດດັ່ງກ່າວໄປໃສ່ DOM (active) ເວລາທີ່ຈະພ້ອມ. ຍ້ອນວ່າເຈົ້າສ້າງຫຼັກສັດດັ່ງກ່າວຫຼັກສັດຫຼັກສາກ່ອນຈະໃຫ້ຫຼັກສັດດັ່ງກ່າວໄປໃສ່ DOM, ເຈົ້າຈະຕ້ອງດຽວໃນການການຄວາມຈະແບບຄວາມຈະແບບຄວາມ.

ຖ້າເຈົ້າຕ້ອງທີ່ຈະເພີ່ມຫຼັກສັດ HTML ໃນການລະລາຍການແບບສະໜາມການປະຕິບັດການແບບຫຼັກສາຂອງເບິ່ງຫຼັກສາ DocumentFragment ຈະສາມາດການປັບປຸງຄວາມສະດວກຫຼາຍກວ່າ.

ເຫັນດີ:ຫຼັກສາຂອງຂໍ້ມູນທີ່ຖືກເພີ່ມໃສ່ຫຼັກສັດ DocumentFragment ຈະຖືກຫຼັງການຂອງໂດຍໂດຍເບິ່ງຫຼັກສາຂອງໂດຍຫຼັກສາທໍາອິດ.

ຄວາມຍາວ

ຕົວຢ່າງ 1

ສົ່ງຫຼັກສັດໄປໃນລາຍການທີ່ບໍ່ມີຫຼັກສັດ.

const fruits = ["Banana", "Orange", "Mango"];
// ສ້າງຫຼັກສັດ DocumentFragment:
const dFrag = document.createDocumentFragment();
// ສົ່ງຫຼັກສັດ li ໄປໃນຫຼັກສັດ DocumentFragment:
for (let x in fruits) {
  const li = document.createElement('li');
  li.textContent = fruits[x];
  dFrag.appendChild(li);
}
// ສົ່ງຫຼັກສັດໄປໃນລາຍການ:
document.getElementById('myList').appendChild(dFrag);

ທ້າທາຍພິຈາລະນາ

ຕົວຢ່າງ 2

ສົ່ງຫຼັກສັດໄປໃນລາຍການທີ່ມີຫຼັກສັດ.

const fruits = ["Banana", "Orange", "Mango"];
// ສ້າງຫຼັກສັດ DocumentFragment:
const dFrag = document.createDocumentFragment();
// ສົ່ງຫຼັກສັດ li ໄປໃນຫຼັກສັດ DocumentFragment:
for (let x in fruits) {
  const li = document.createElement('li');
  li.textContent = fruits[x];
  dFrag.appendChild(li);
}
// ສົ່ງຫຼັກສັດໄປໃນລາຍການ:
document.getElementById('myList').appendChild(dFrag);

ທ້າທາຍພິຈາລະນາ

ຄຳສັບພາສາ

document.createDocumentFragment()

ພະຍາດ

ບໍ່ມີ.

ຜົນກະທົບ

ປະເພດ ການອະທິບາຍ
ຫຼັກສັດ ຫຼັກສັດ DocumentFragment ທີ່ບໍ່ມີຫຼັກສັດລຸ່ມ.

ການສະໜັບສະໜູນບັນຊີຍາການ

document.createComment() ເປັນເປີດຄະນະ DOM Level 1 (1998)。

所有浏览器都支持它：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
ການສະໜັບສະໜູນ 9-11 ການສະໜັບສະໜູນ ການສະໜັບສະໜູນ ການສະໜັບສະໜູນ ການສະໜັບສະໜູນ