DOM CRUD آپریشنز

Document Object Model (DOM) وہ طریقہ ہے جس کے ذریعے براؤزرز HTML کو ظاہر کرتے ہیں۔ یہ ہر ایلیمنٹ (element)، ایٹریبیوٹ (attribute) اور ٹیکسٹ کے ٹکڑے کو ایک آبجیکٹ (object) میں تبدیل کر دیتا ہے۔ JavaScript ان آبجیکٹس کو استعمال کرتے ہوئے اس چیز کو تبدیل کرتی ہے جو آپ اسکرین پر دیکھتے ہیں۔

جب آپ کسی بٹن پر کلک کرتے ہیں اور صفحہ ریفریش ہوئے بغیر اپ ڈیٹ ہو جاتا ہے، تو JavaScript دراصل DOM کو تبدیل کر رہی ہوتی ہے۔

آپ ان طریقوں (methods) کے ذریعے CRUD (Create, Read, Update, Delete) آپریشنز انجام دے سکتے ہیں۔

1. ایلیمنٹس تک رسائی حاصل کرنا (Read)

کسی چیز کو تبدیل کرنے کے لیے، آپ کو پہلے اسے تلاش کرنا ہوگا۔ ان طریقوں (methods) کا استعمال کریں:

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

2. ایلیمنٹس بنانا (Create)

آپ JavaScript کا استعمال کرتے ہوئے نئے HTML ایلیمنٹس تیار کر سکتے ہیں۔

  • createElement("tagName") ایلیمنٹ کو میموری میں تخلیق کرتا ہے۔
  • append() مواد کو پیرنٹ (parent) کے آخر میں شامل کرتا ہے۔
  • appendChild() ایک سنگل نوڈ کو آخری چائلڈ (child) کے طور پر شامل کرتا ہے۔
  • prepend() مواد کو پیرنٹ کے آغاز میں شامل کرتا ہے۔
  • before() کسی مخصوص آئٹم سے پہلے ایک ایلیمنٹ شامل کرتا ہے۔
  • after() کسی مخصوص آئٹم کے بعد ایک ایلیمنٹ شامل کرتا ہے۔
  • insertBefore() ایک ایلیمنٹ کو کسی مخصوص چائلڈ سے پہلے رکھتا ہے۔

نوٹ: ایک ایلیمنٹ میموری میں تب تک رہتا ہے جب تک آپ اسے صفحہ پر شامل نہیں کر دیتے۔

3. ایلیمنٹس کو اپ ڈیٹ کرنا (Update)

آپ ان پراپرٹیز (properties) کا استعمال کرتے ہوئے موجودہ مواد کو تبدیل کر سکتے ہیں:

  • innerText: صرف نظر آنے والے ٹیکسٹ کو تبدیل کرتا ہے۔
  • textContent: تمام ٹیکسٹ کو تبدیل کرتا ہے، بشمول چھپے ہوئے ٹیکسٹ کے۔
  • innerHTML: مواد کو تبدیل کرتا ہے اور آپ کو HTML ٹیگز شامل کرنے کی اجازت دیتا ہے۔

4. ایٹریبیوٹس کے ساتھ کام کرنا (Update)

ایٹریبیوٹس ایلیمنٹس کے بارے میں اضافی معلومات فراہم کرتے ہیں۔

  • setAttribute(name, value): ایٹریبیوٹ کو سیٹ کرتا ہے یا تبدیل کرتا ہے۔
  • getAttribute(name): ایٹریبیوٹ کی ویلیو حاصل کرتا ہے۔
  • removeAttribute(name): ایٹریبیوٹ کو حذف کر دیتا ہے۔
  • hasAttribute(name): چیک کرتا ہے کہ آیا کوئی ایٹریبیوٹ موجود ہے۔

پرو ٹپ: پرانی کلاسز کو ہٹائے بغیر نئی کلاس شامل کرنے کے لیے classList.add() کا استعمال کریں۔ setAttribute() پوری ویلیو کو تبدیل کر دیتا ہے۔

5. ایلیمنٹس کو ہٹانا (Delete)

صفحہ سے ایلیمنٹ کو حذف کرنے کے لیے، استعمال کریں:

  • remove()

CRUD فلو کا خلاصہ:

  • Create: createElement()
  • Update: innerText = "New text"
  • Add: appendChild()
  • Delete: remove()

ان طریقوں (methods) میں مہارت حاصل کرنے سے آپ ٹو-ڈو لسٹ (to-do lists) یا کیلکولیٹرز جیسی انٹرایکٹو ایپس بنا سکتے ہیں۔ یہ فرنٹ اینڈ ڈویلپمنٹ (front-end development) کے لیے ایک اہم مہارت ہے۔

Source: https://dev.to/madhanraj/document-object-model-dom-crud-operations-9ka