عمليات CRUD في الـ DOM

يمثل نموذج كائن المستند (DOM) الطريقة التي تمثل بها المتصفحات لغة HTML؛ حيث يقوم بتحويل كل عنصر، وسمة، وقطعة نصية إلى كائن (object). وتستخدم JavaScript هذه الكائنات لتغيير ما تراه على الشاشة.

عندما تنقر على زر وتتحدث الصفحة دون إعادة تحميلها، فإن JavaScript تقوم بتغيير الـ DOM.

يمكنك إجراء عمليات CRUD (الإنشاء، القراءة، التحديث، الحذف) باستخدام هذه الطرق.

1. الوصول إلى العناصر (القراءة)

لتغيير شيء ما، يجب عليك العثور عليه أولاً. استخدم هذه الطرق:

  • getElementById()
  • getElementsByClassName()
  • getElementsByTagName()
  • querySelector()
  • querySelectorAll()

2. إنشاء العناصر (الإنشاء)

يمكنك إنشاء عناصر HTML جديدة باستخدام JavaScript.

  • createElement("tagName") ينشئ العنصر في الذاكرة.
  • append() يضيف المحتوى إلى نهاية العنصر الأب.
  • appendChild() يضيف عقدة (node) واحدة كآخر ابن.
  • prepend() يضيف المحتوى إلى بداية العنصر الأب.
  • before() يدرج عنصراً قبل عنصر محدد.
  • after() يدرج عنصراً بعد عنصر محدد.
  • insertBefore() يضع عنصراً قبل ابن محدد.

ملاحظة: يبقى العنصر في الذاكرة حتى تقوم بإضافته إلى الصفحة.

3. تحديث العناصر (التحديث)

يمكنك تغيير المحتوى الحالي باستخدام هذه الخصائص:

  • innerText: يغير النص المرئي فقط.
  • textContent: يغير كل النصوص، بما في ذلك النصوص المخفية.
  • innerHTML: يغير المحتوى ويسمح لك بإضافة وسوم HTML.

4. التعامل مع السمات (التحديث)

توفر السمات (Attributes) معلومات إضافية حول العناصر.

  • setAttribute(name, value): يضبط أو يستبدل سمة ما.
  • getAttribute(name): يسترجع قيمة سمة ما.
  • removeAttribute(name): يحذف سمة ما.
  • hasAttribute(name): يتحقق مما إذا كانت السمة موجودة.

نصيحة احترافية: استخدم classList.add() لإضافة فئة (class) دون إزالة الفئات القديمة، بينما تقوم setAttribute() باستبدال القيمة بالكامل.

5. إزالة العناصر (الحذف)

لحذف عنصر من الصفحة، استخدم:

  • remove()

ملخص لتدفق عمليات CRUD:

  • الإنشاء: createElement()
  • التحديث: innerText = "New text"
  • الإضافة: appendChild()
  • الحذف: remove()

إتقان هذه الطرق يتيح لك بناء تطبيقات تفاعلية مثل قوائم المهام أو الآلات الحاسبة. هذه مهارة حيوية لتطوير الواجهات الأمامية (front-end development).

المصدر: https://dev.to/madhanraj/document-object-model-dom-crud-operations-9ka