18- آموزش DOM در جاوااسکریپت | آشنایی با Document Object Model

در این آموزش با مفهوم DOM یا Document Object Model در جاوااسکریپت آشنا می‌شویم. یاد می‌گیریم DOM چیست، چگونه ساختار یک صفحه HTML را به‌صورت درختی نمایش می‌دهد و چرا برای انتخاب، تغییر و مدیریت عناصر صفحه با جاوااسکریپت اهمیت زیادی دارد.

تا اینجای مسیر، با مفاهیم پایه جاوااسکریپت مانند متغیرها، شرط‌ها، آرایه‌ها و کار با کنسول آشنا شدیم. این مفاهیم، پایه‌های اصلی زبان جاوااسکریپت هستند و یادگیری آن‌ها کاملاً ضروری است.
اما از این بخش به بعد، وارد مرحله‌ای می‌شویم که می‌توانیم جاوااسکریپت را مستقیماً در مرورگر و در تعامل با صفحه وب استفاده کنیم؛ یعنی کار با DOM.

DOM چیست؟

DOM مخفف Document Object Model است.
به زبان ساده، DOM یک نمایش ساختاریافته از سند HTML است که توسط مرورگر ساخته می‌شود.

مرورگر پس از بارگذاری یک صفحه HTML، آن را به مجموعه‌ای از نودها (Nodes) یا المان‌ها (Elements) تبدیل می‌کند. این ساختار معمولاً شبیه یک درخت در نظر گرفته می‌شود که در آن هر تگ HTML یک نود محسوب می‌شود.

برای مثال:

تگ <html>
تگ <head>
تگ <body>
تگ <h1>
تگ <a>

همه این‌ها بخشی از ساختار DOM هستند.

چرا DOM مهم است؟

اهمیت DOM در این است که جاوااسکریپت می‌تواند از طریق آن، عناصر صفحه را انتخاب و ویرایش کند.
یعنی شما می‌توانید:

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

به همین دلیل، DOM یکی از اصلی‌ترین بخش‌های توسعه فرانت‌اند محسوب می‌شود.

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

DOM معمولاً به شکل یک درخت نمایش داده می‌شود. در بالاترین سطح، مرورگر یک شیء به نام window در اختیار ما قرار می‌دهد.
داخل window، شیء مهمی به نام document قرار دارد که نماینده سند بارگذاری‌شده یا همان صفحه وب است.

ساختار کلی به این صورت است:

window
- document
  - html
    - head
      - meta
      - title
    - body
      - header
      - h1
      - a
      - section
      - سایر عناصر صفحه

در این ساختار:

head و body در یک سطح قرار دارند و Sibling هستند.
هر عنصر می‌تواند فرزند (Child) یا والد (Parent) عنصر دیگری باشد.

DOM و برنامه‌نویسی شیءگرا

DOM ماهیت شیءگرا دارد.
یعنی هر نود یا عنصر در DOM یک شیء است و مجموعه‌ای از ویژگی‌ها (Properties) و متدها (Methods) را در اختیار ما قرار می‌دهد.

برای مثال، هر عنصر می‌تواند:

ویژگی‌هایی مثل id، className یا innerHTML داشته باشد
متدهایی برای افزودن، حذف یا تغییر محتوا داشته باشد

این ویژگی باعث می‌شود بتوانیم با جاوااسکریپت کنترل کاملی روی اجزای صفحه داشته باشیم.

DOM و ارتباط آن با HTML

اگر قبلاً فقط با HTML کار کرده باشید، احتمالاً ساختار DOM برایتان آشناست؛ چون در اصل همان صفحه HTML شماست، اما این بار به شکل یک ساختار قابل‌مدیریت برای جاوااسکریپت.

به بیان دیگر:

HTML ساختار صفحه را تعریف می‌کند
DOM نسخه‌ای زنده و قابل‌تعامل از همان ساختار در مرورگر است
JavaScript از طریق DOM با صفحه تعامل برقرار می‌کند

آیا هنوز به jQuery نیاز داریم؟

در گذشته، کتابخانه‌هایی مثل jQuery برای کار با DOM بسیار محبوب بودند، چون انتخاب و تغییر عناصر صفحه را ساده‌تر می‌کردند.
اما امروزه جاوااسکریپت مدرن، مخصوصاً با متدهایی مثل querySelector و querySelectorAll، این کارها را بسیار ساده کرده است.

به همین دلیل، یادگیری Vanilla JavaScript برای کار با DOM بسیار ارزشمند است؛ چون:

به کتابخانه اضافی نیاز ندارید
کد سبک‌تر و سریع‌تر اجرا می‌شود
درک عمیق‌تری از نحوه عملکرد مرورگر و جاوااسکریپت پیدا می‌کنید

در بسیاری از موارد، استفاده از jQuery برای انتخاب عناصر ساده، دیگر ضرورتی ندارد.

در ادامه چه چیزی یاد می‌گیریم؟

در ادامه این مسیر، ابتدا با خود شیء document بیشتر آشنا می‌شویم و برخی از ویژگی‌ها و متدهای مهم آن را بررسی می‌کنیم.
سپس وارد بخش‌های عملی‌تر می‌شویم، مثل:

انتخاب عنصر با getElementById
انتخاب عنصر با querySelector
انتخاب چند عنصر با querySelectorAll
تغییر محتوا و استایل
کار با رویدادها
جابه‌جایی بین نودها و عناصر مختلف در DOM

جمع‌بندی

در این آموزش با مفهوم DOM آشنا شدیم و فهمیدیم که:

DOM مخفف Document Object Model است
DOM نمایش ساختاریافته و درختی یک سند HTML در مرورگر است
هر تگ HTML به‌صورت یک نود یا عنصر در DOM در نظر گرفته می‌شود
جاوااسکریپت با استفاده از DOM می‌تواند عناصر صفحه را انتخاب، تغییر، اضافه یا حذف کند
شیء document بخشی از window است و نماینده صفحه بارگذاری‌شده محسوب می‌شود
در جاوااسکریپت مدرن، کار با DOM بدون نیاز به jQuery کاملاً ممکن و حتی ترجیح‌دادنی است

DOM نقطه شروع تعامل واقعی جاوااسکریپت با رابط کاربری است و یادگیری آن برای توسعه فرانت‌اند ضروری است.

// 0 comments

#جاوااسکریپت#آموزش جاوااسکریپت#DOM#Document Object Model#آموزش DOM#کار با DOM#JavaScript DOM#فرانت اند#توسعه وب#querySelector#document object