عمليات CRUD في الـ DOM
نموذج كائن المستند (DOM) هو هيكل شجري لملف HTML الخاص بك. يستخدمه JavaScript للوصول إلى كل عنصر، وسم (attribute)، وقطعة نص في الصفحة وتغييرها.
عندما تنقر على زر وتتحدث الصفحة دون إعادة تحميل، فأنت ترى التلاعب بالـ DOM في الواقع.
إليك كيفية إجراء عمليات CRUD (الإنشاء، القراءة، التحديث، الحذف).
- القراءة: الوصول إلى العناصر استخدم هذه الطرق للعثور على العناصر في صفحتك:
getElementById()getElementsByClassName()getElementsByTagName()querySelector()querySelectorAll()
- الإنشاء: إنشاء عناصر جديدة يمكنك إنشاء عناصر HTML جديدة باستخدام JavaScript.
createElement(): ينشئ وسماً جديداً في الذاكرة.append(): يضيف محتوى إلى نهاية العنصر الأب.appendChild(): يضيف عقدة واحدة كآخر ابن.prepend(): يضيف محتوى إلى بداية العنصر الأب.before(): يدرج عنصراً قبل هدف محدد.after(): يدرج عنصراً بعد هدف محدد.insertBefore(): يضع عنصراً جديداً قبل ابن موجود.
- التحديث: تغيير المحتوى قم بتعديل ما يراه المستخدمون على الشاشة:
innerText: يحدّث النص المرئي فقط.textContent: يحدّث كل النصوص، بما في ذلك النصوص المخفية.innerHTML: يحدّث المحتوى ويسمح لك بإضافة وسوم HTML.
- السمات (Attributes): إدارة الخصائص تضيف السمات معلومات إضافية إلى وسومك.
setAttribute(): يحدد قيمة جديدة للسمة. لاحظ أن هذا يستبدل القيمة القديمة.getAttribute(): يحصل على القيمة الحالية.removeAttribute(): يحذف سمة.hasAttribute(): يتحقق مما إذا كانت السمة موجودة.
نصيحة احترافية: استخدم classList.add() لإضافة فئة (class) دون حذف الفئات الحالية. استخدم setAttribute() للسمات المخصصة.
- الحذف: إزالة العناصر لإزالة عنصر من الصفحة، استخدم:
remove()
ملخص تدفق عمليات CRUD:
- الإنشاء:
document.createElement("p") - التحديث:
p.innerText = "Hello" - القراءة:
document.getElementById("p") - الحذف:
p.remove()
إتقان هذه الطرق يتيح لك بناء أدوات تفاعلية مثل قوائم المهام، والآلات الحاسبة، وأدوات التحقق من صحة النماذج. إنها خطوة حيوية نحو تعلم أطر عمل الويب الحديثة.
المصدر: https://dev.to/madhanraj/document-object-model-dom-crud-operations-9ka
مجتمع تعليمي اختياري: https://t.me/GyaanSetuAi