وقتی مرورگر فایل HTML را می‌خواند، آن را به یک ساختار درختی در حافظه تبدیل میکند. هر برچسب مثل تیتر، پاراگراف و دکمه یک «گره» در این درخت است. به این درخت DOM می‌گویند. جاوااسکریپت از طریق DOM می‌تواند عناصر را پیدا کند، متنشان را عوض کند، حذفشان کند یا عنصر جدید اضافه کند، و مرورگر صفحه را فوراً به‌روز میکند.
مثال#
<p id="msg">سلام</p>document.getElementById("msg").textContent = "خوش آمدید";با این کد، متن پاراگراف بدون رفرش عوض می‌شود. وقتی در فروشگاه عدد سبد خرید بعد از افزودن کالا بالا می‌رود، معمولاً همین اتفاق در DOM رخ داده است.
تفاوت با HTML#
HTML فایل متنی اولیه است. DOM نسخه‌ی زنده و قابلتغییر آن در مرورگر است. اگر با جاوااسکریپت محتوا اضافه شود، آن در DOM هست ولی در فایل HTML اصلی نیست. برای همین گاهی «مشاهده‌ی منبع صفحه» با چیزی که در ابزار توسعه‌دهنده می‌بینید فرق دارد.
چرا مهم است#
- پایه‌ی تمام تعامل‌های پویا در صفحه است
- کتابخانه‌هایی مثل React و Vue برای سریع‌تر کردن به‌روزرسانی DOM ساخته شده‌اند، چون تغییر زیاد و پشت‌سرهم آن می‌تواند صفحه را کند کند
- ابزار توسعه‌دهنده‌ی مرورگر (تب Elements) DOM را نشان می‌دهد و برای دیباگ بسیار مفید است
نکته‌ی عملی#
DOM بزرگ و با تعداد گره‌های بسیار زیاد می‌تواند سرعت صفحه را پایین بیاورد. ساختار HTML را ساده نگه دارید.