DOM چیست؟ آشنایی با Document Object Model در JavaScript

18 می 2026
ارسال شده توسط
JavaScript، فرانت‌اند

DOM چیست و چطور HTML را زنده می‌کند؟

وقتی یک صفحه HTML می‌سازید، در واقع فقط ساختار اولیه صفحه را مشخص می‌کنید.
متن‌ها، تصاویر و دکمه‌ها روی صفحه قرار می‌گیرند، اما هنوز هیچ تعامل واقعی وجود ندارد.

اما به محض اینکه JavaScript وارد ماجرا می‌شود، صفحه شروع به «زندگی» می‌کند.
دکمه‌ها کلیک می‌شوند، متن‌ها تغییر می‌کنند، عناصر جدید به صفحه اضافه می‌شوند
و همه چیز پویا می‌شود.

اینجاست که مفهوم DOM وارد صحنه می‌شود.
DOM در واقع پلی است بین کدهای شما و آنچه کاربر در صفحه وب می‌بیند.

DOM چیست؟

DOM مخفف عبارت Document Object Model است.
مرورگرها وقتی یک فایل HTML را دریافت می‌کنند،
آن را به یک ساختار قابل دسترسی برای برنامه‌نویسی تبدیل می‌کنند.

این ساختار به شکل یک درخت سازمان‌دهی می‌شود
که در آن هر عنصر HTML یک «گره» یا Node محسوب می‌شود.

ساختار درختی DOM

فرض کنید HTML ساده زیر را داریم: 


<body>
  <h1>Hello World</h1>
  <p>Welcome to my website</p>
</body>

مرورگر این کد را به یک ساختار درختی تبدیل می‌کند.

  • body گره اصلی است
  • h1 و p فرزندان آن هستند
  • متن داخل عناصر نیز یک Node محسوب می‌شود

این درخت همان چیزی است که ما آن را DOM می‌نامیم.

JavaScript چگونه با DOM کار می‌کند؟

JavaScript می‌تواند از طریق DOM
به عناصر صفحه دسترسی پیدا کند و آن‌ها را تغییر دهد.

برای مثال می‌توانیم یک عنصر را انتخاب کنیم
و متن آن را تغییر دهیم: 


document.querySelector("h1").textContent = "سلام دنیا!";

در این مثال، جاوااسکریپت عنصر h1 را از DOM پیدا می‌کند
و متن داخل آن را تغییر می‌دهد.

در واقع صفحه بدون نیاز به رفرش شدن تغییر می‌کند.

کارهایی که می‌توان با DOM انجام داد

JavaScript با استفاده از DOM می‌تواند کارهای زیادی انجام دهد:

  • تغییر متن عناصر
  • تغییر استایل عناصر
  • اضافه یا حذف کردن عناصر HTML
  • واکنش به رویدادهایی مثل کلیک کاربر

تقریباً تمام تعاملاتی که در صفحات وب مدرن می‌بینید
به کمک DOM انجام می‌شود.

مثال ساده از تعامل با DOM

در مثال زیر با کلیک روی دکمه،
متن صفحه تغییر می‌کند: 


<button id="btn">کلیک کن</button>
<p id="text">سلام</p>

<script>
document.getElementById("btn").onclick = function(){
  document.getElementById("text").textContent = "DOM کار می‌کند!";
}
</script>

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

جمع‌بندی

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

به بیان ساده،
DOM همان پلی است که کدهای JavaScript شما را
به آنچه کاربر در صفحه می‌بیند متصل می‌کند.

اگر می‌خواهید در دنیای فرانت‌اند حرفه‌ای شوید،
درک درست DOM یکی از قدم‌های اساسی در این مسیر است.

برچسب ها:

دیدگاهتان را بنویسید