JavaScript Academy · درس

إزالة العقد واستبدالها

أزيلوا العناصر واستبدلوها بأمان.

إزالة العقد واستبدالها درس مجاني في JavaScript Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في JavaScript Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة JavaScript Academy 4 دروس في المجموع.

إخراج العقد

إلى جانب إضافة العناصر، ستحتاجون غالبًا إلى حذفها أو استبدالها. وتجعل أساليب DOM الحديثة ذلك موجزًا وسهل القراءة.

remove

تفصل remove العنصر عن DOM مباشرة، من دون الحاجة إلى مرجع إلى العنصر الأب.

const alert = document.querySelector(".alert");
alert.remove();

removeChild

تُستدعى removeChild الأقدم على العنصر الأب، وتعيد العقدة المحذوفة، مما يتيح لكم إعادة استخدامها.

const list = document.querySelector("ul");
const removed = list.removeChild(list.firstElementChild);

حذف عدة عناصر

لمسح جميع الأبناء، كرروا العملية حتى يصبح العنصر فارغًا، أو اضبطوا innerHTML على سلسلة نصية فارغة (وهو سريع لكنه يتخلص من المراجع).

while (list.firstChild) {
  list.removeChild(list.firstChild);
}

replaceWith

تستبدل replaceWith عنصرًا بعقدة جديدة واحدة أو عدة عقد أو سلاسل نصية في استدعاء واحد.

const old = document.querySelector(".placeholder");
const fresh = document.createElement("div");
old.replaceWith(fresh);

replaceWith مع عدة عقد

تقبل replaceWith عدة معاملات، لذلك يمكنكم استبدال عقدة واحدة بعدة عقد.

old.replaceWith(headerEl, bodyEl);

replaceChild

تُستدعى replaceChild(newNode, oldNode) التقليدية على العنصر الأب. انتبهوا إلى ترتيب المعاملات: الجديدة أولًا والقديمة ثانيًا.

list.replaceChild(newItem, oldItem);

تبقى العقد المنفصلة موجودة

لا تُدمَّر العقدة المحذوفة. فإذا احتفظتم بمرجع إليها، يمكنكم إعادة إدراجها لاحقًا، وهو أمر مفيد في أنماط الإظهار والإخفاء.

const saved = panel;
panel.remove();
// later:
container.append(saved);

replaceChildren

تستبدل replaceChildren جميع أبناء العنصر دفعة واحدة، أو تمسحهم عند استدعائها من دون معاملات.

list.replaceChildren(itemA, itemB); // set new contents
list.replaceChildren();             // remove everything

الذاكرة ومستمعو الأحداث

يؤدي حذف عنصر إلى إيقاف تشغيل مستمعي أحداثه أثناء انفصاله عن DOM. وإذا أعدتم إضافته، فستبقى المستمعات المرتبطة بالعنصر نفسه.

btn.addEventListener("click", handler);
btn.remove();          // handler will not fire while detached
container.append(btn); // handler works again

اختيار الطريقة

فضّلوا remove وreplaceWith عند كتابة شيفرة حديثة وواضحة. واستخدموا removeChild/replaceChild عندما تحتاجون إلى العقدة المُعادة أو إلى دعم البيئات القديمة جدًا.

اختبار سريع

تحققوا من ترتيب المعاملات.

مراجعة

أزيلوا العقد باستخدام remove الحديثة أو removeChild المعتمدة على العنصر الأب. واستبدلوها باستخدام replaceWith (الحديثة، وتقبل عدة معاملات) أو replaceChild(newNode, oldNode). واستخدموا replaceChildren لإعادة ضبط جميع الأبناء. تبقى العقد المنفصلة محفوظة في الذاكرة، ويمكن إعادة إدراجها لاحقًا.

الأسئلة الشائعة

هل درس «إزالة العقد واستبدالها» مجاني؟

نعم — نص درس «إزالة العقد واستبدالها» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة JavaScript Academy، انتقل إلى CoddyKit PRO. تتضمن دورة JavaScript Academy 4 دروس في المجموع.

ماذا ستتعلم في «إزالة العقد واستبدالها»؟

أزيلوا العناصر واستبدلوها بأمان. تتمرن على JavaScript Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ JavaScript Academy؟

لا تُشترط خبرة سابقة. JavaScript Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.

كم من الوقت يستغرق درس «إزالة العقد واستبدالها»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس JavaScript Academy هذا؟

نعم. كل درس في JavaScript Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى JavaScript Academy