JavaScript HTML DOM

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

HTML DOM (مدل‌سازی اوبجکت مستند)

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

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

درخت HTML DOM اوبجکت

درخت HTML DOM

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

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

چه چیزی را خواهید آموخت

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

  • چگونه محتوای عنصر HTML را تغییر دهیم
  • چگونه استایل عناصر HTML (CSS) را تغییر دهیم
  • چگونه به رویدادهای 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 است.