JavaScript HTML DOM

با استفاده از HTML DOM، JavaScript می‌تواند به همه عناصر HTML مستند دسترسی داشته باشد و آنها را تغییر دهد.

HTML DOM (مدل‌سازی مستند)

وقتی که صفحه بارگذاری می‌شود، مرورگر مدل‌سازی‌های مستند صفحه (DOM) را ایجاد می‌کند (Document Object Model).

HTML DOM مدل به صورتدرخت:

درخت DOM HTML

درخت HTML DOM

از طریق این مدل‌سازی‌های ابر، JavaScript تمام قدرت‌های ایجاد HTML پویا را به دست می‌آورد:

  • JavaScript می‌تواند همه عناصر HTML موجود در صفحه را تغییر دهد
  • JavaScript می‌تواند همه ویژگی‌های HTML موجود در صفحه را تغییر دهد
  • JavaScript می‌تواند همه استایل‌های CSS موجود در صفحه را تغییر دهد
  • JavaScript می‌تواند عناصر و ویژگی‌های HTML موجود را حذف کند
  • JavaScript می‌تواند عناصر و ویژگی‌های HTML جدیدی را اضافه کند
  • JavaScript می‌تواند به همه رویدادهای HTML موجود در صفحه واکنش نشان دهد
  • JavaScript می‌تواند رویدادهای HTML جدیدی را در صفحه ایجاد کند

چه چیزی را یاد خواهید گرفت

در فصل‌های زیر این آموزش، شما خواهید آموخت که:

  • چگونه محتوای عنصر HTML را تغییر دهیم
  • چگونه استایل (CSS) عناصر HTML را تغییر دهیم
  • چگونه به رویدادهای HTML DOM واکنش نشان دهیم
  • چگونه عناصر HTML را اضافه و حذف کنیم

DOM چیست؟

DOM یک استاندارد W3C (World Wide Web Consortium) است.

DOM استانداردهایی برای دسترسی به مستند تعریف می‌کند:

“W3C Document Object Model (DOM) یک رابط مستقل از پلتفرم و زبان است که به برنامه‌ها و اسکریپت‌ها اجازه می‌دهد به صورت پویا به محتوای، ساختار و استایل مستند دسترسی پیدا کنند و آن‌ها را به‌روزرسانی کنند.”

استاندارد W3C DOM به 3 بخش مختلف تقسیم شده است:

  • Core DOM - مدل استاندارد برای همه انواع مستندات
  • XML DOM - مدل استاندارد مستند XML
  • HTML DOM - مدل استاندارد مستند HTML

HTML DOM چیست؟

HTML DOM استاندارد HTML استشیءمدل ورابط برنامه‌نویسی。این تعریف می‌کند:

  • به عنوانشیءعناصر HTML
  • تمام عناصر HTMLخصوصیات
  • دسترسی به تمام عناصر HTMLروش‌ها
  • تمام عناصر HTMLرویدادها

به عبارت دیگر: HTML DOM استانداردی برای دریافت، تغییر، اضافه کردن یا حذف عناصر HTML است。