عملیات CRUD در DOM

مدل شیء سند (DOM) یک ساختار درختی برای HTML شماست. جاوااسکریپت از آن برای دسترسی و تغییر هر عنصر، ویژگی (attribute) و بخش متنی در یک صفحه استفاده می‌کند.

وقتی روی یک دکمه کلیک می‌کنید و صفحه بدون نیاز به بازنشانی (refresh) به‌روزرسانی می‌شود، در واقع شاهد دستکاری DOM هستید.

در ادامه نحوه انجام عملیات CRUD (ایجاد، خواندن، به‌روزرسانی، حذف) آورده شده است.

۱. خواندن (Read): دسترسی به عناصر

از این متدها برای یافتن عناصر در صفحه خود استفاده کنید:

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

۲. ایجاد (Create): ساخت عناصر جدید

شما می‌توانید با استفاده از جاوااسکریپت، عناصر HTML جدیدی ایجاد کنید.

  • createElement(): یک تگ جدید در حافظه ایجاد می‌کند.
  • append(): محتوا را به انتهای یک عنصر والد اضافه می‌کند.
  • appendChild(): یک گره (node) واحد را به عنوان آخرین فرزند اضافه می‌کند.
  • prepend(): محتوا را به ابتدای یک عنصر والد اضافه می‌کند.
  • before(): یک عنصر را قبل از یک هدف مشخص درج می‌کند.
  • after(): یک عنصر را بعد از یک هدف مشخص درج می‌کند.
  • insertBefore(): یک عنصر جدید را قبل از یک فرزند موجود قرار می‌دهد.

۳. به‌روزرسانی (Update): تغییر محتوا

آنچه کاربران در صفحه می‌بینند را تغییر دهید:

  • innerText: فقط متن قابل مشاهده را به‌روزرسانی می‌کند.
  • textContent: تمام متن‌ها، از جمله متن‌های مخفی را به‌روزرسانی می‌کند.
  • innerHTML: محتوا را به‌روزرسانی کرده و به شما اجازه می‌دهد تگ‌های HTML اضافه کنید.

۴. ویژگی‌ها (Attributes): مدیریت ویژگی‌ها

ویژگی‌ها اطلاعات اضافی به تگ‌های شما اضافه می‌کنند.

  • setAttribute(): مقدار جدیدی برای یک ویژگی تعیین می‌کند. توجه داشته باشید که این کار مقدار قبلی را جایگزین می‌کند.
  • getAttribute(): مقدار فعلی را دریافت می‌کند.
  • removeAttribute(): یک ویژگی را حذف می‌کند.
  • hasAttribute(): بررسی می‌کند که آیا ویژگی خاصی وجود دارد یا خیر.

نکته حرفه‌ای: از classList.add() استفاده کنید تا بدون حذف کلاس‌های فعلی، یک کلاس جدید اضافه کنید. برای ویژگی‌های سفارشی (custom attributes) از setAttribute() استفاده کنید.

۵. حذف (Delete): حذف عناصر

برای حذف یک عنصر از صفحه، از این متد استفاده کنید:

  • remove()

خلاصه جریان CRUD:

  • ایجاد: document.createElement("p")
  • به‌روزرسانی: p.innerText = "Hello"
  • خواندن: document.getElementById("p")
  • حذف: p.remove()

تسلط بر این متدها به شما اجازه می‌دهد ابزارهای تعاملی مانند لیست‌های انجام کار (to-do lists)، ماشین‌حساب‌ها و اعتبارسنج‌های فرم بسازید. این یک قدم حیاتی در مسیر یادگیری فریم‌ورک‌های مدرن وب است.

منبع: https://dev.to/madhanraj/document-object-model-dom-crud-operations-9ka

انجمن یادگیری اختیاری: https://t.me/GyaanSetuAi