DOM CRUD آپریشنز

Document Object Model (DOM) آپ کے HTML کے لیے ایک ٹری اسٹرکچر (tree structure) ہے۔ JavaScript اسے پیج پر موجود ہر ایلیمنٹ (element)، ایٹریبیوٹ (attribute) اور ٹیکسٹ کے حصے تک رسائی حاصل کرنے اور انہیں تبدیل کرنے کے لیے استعمال کرتی ہے۔

جب آپ کسی بٹن پر کلک کرتے ہیں اور پیج ریفریش ہوئے بغیر اپ ڈیٹ ہو جاتا ہے، تو آپ DOM میں ہونے والی تبدیلیوں (manipulation) کو عملی طور پر دیکھ رہے ہوتے ہیں۔

یہاں بتایا گیا ہے کہ آپ CRUD (Create, Read, Update, Delete) آپریشنز کیسے انجام دے سکتے ہیں۔

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

اپنے پیج پر ایلیمنٹس تلاش کرنے کے لیے ان طریقوں (methods) کا استعمال کریں:

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

2. Create: نئے ایلیمنٹس بنانا

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

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

3. Update: مواد کو تبدیل کرنا

اس چیز کو تبدیل کریں جو صارفین اسکرین پر دیکھتے ہیں:

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

4. Attributes: پراپرٹیز کا انتظام کرنا

ایٹریبیوٹس آپ کے ٹیگز میں اضافی معلومات شامل کرتے ہیں۔

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

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

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

پیج سے ایلیمنٹ کو ہٹانے کے لیے استعمال کریں:

  • remove()

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

  • Create: document.createElement("p")
  • Update: p.innerText = "Hello"
  • Read: document.getElementById("p")
  • Delete: p.remove()

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

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

Optional learning community: https://t.me/GyaanSetuAi