عملیات CRUD در DOM

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

وقتی روی یک دکمه کلیک می‌کنید و صفحه بدون رفرش شدن به‌روزرسانی می‌شود، جاوااسکریپت در حال تغییر دادن DOM است.

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

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

برای تغییر چیزی، ابتدا باید آن را پیدا کنید. از این متدها استفاده کنید:

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

۲. ایجاد عناصر (ایجاد)

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

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

نکته: یک عنصر تا زمانی که آن را به صفحه اضافه نکنید، در حافظه باقی می‌ماند.

۳. به‌روزرسانی عناصر (به‌روزرسانی)

شما می‌توانید با استفاده از این ویژگی‌ها، محتوای موجود را تغییر دهید:

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

۴. کار با ویژگی‌ها (به‌روزرسانی)

ویژگی‌ها (Attributes) اطلاعات اضافی درباره عناصر ارائه می‌دهند.

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

نکته حرفه‌ای: از classList.add() برای اضافه کردن یک کلاس بدون حذف کلاس‌های قبلی استفاده کنید. setAttribute() کل مقدار را جایگزین می‌کند.

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

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

  • remove()

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

  • ایجاد: createElement()
  • به‌روزرسانی: innerText = "New text"
  • افزودن: appendChild()
  • حذف: remove()

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

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