آموزش جامع مدیریت DOM در جاوااسکریپت

🎯 اهداف یادگیری

درک مفهوم DOM و ساختار درختی آن
یادگیری روش‌های انتخاب عناصر در DOM
تغییر محتوا و استایل عناصر
ایجاد، حذف و ویرایش عناصر DOM

📌 DOM چیست؟

DOM (Document Object Model) نمایش شیءگرای ساختار سند HTML است که به برنامه‌نویسان امکان تغییر محتوا و ساختار صفحات وب را می‌دهد:

html

            DOCTYPE html>
<html>
  <head>
    <title>صفحه نمونه</title>
  </head>
  <body>
    <h1 id="title">سلام دنیا!</h1>
    <p class="message">این یک پاراگراف نمونه است.</p>
  </body>
</html>

            

ویژگی‌های کلیدی DOM:

ساختار درختی: نمایش سلسله مراتبی عناصر HTML
پویایی: امکان تغییر محتوا و استایل عناصر
رویدادها: امکان پاسخ به تعاملات کاربر

📌 انتخاب عناصر DOM

روش‌های مختلفی برای انتخاب عناصر در DOM وجود دارد:

javascript

            // 1. انتخاب با id
const titleElement = document.getElementById('title');
// 2. انتخاب با class
const messages = document.getElementsByClassName('message');
// 3. انتخاب با تگ
const paragraphs = document.getElementsByTagName('p');
// 4. انتخاب با selectorهای CSS (روش مدرن)
const firstMessage = document.querySelector('.message');
const allMessages = document.querySelectorAll('.message');

            

مقایسه روش‌های انتخاب:

getElementById: سریع‌ترین روش برای انتخاب یک عنصر
querySelector: انعطاف‌پذیرترین روش با پشتیبانی از selectorهای CSS
getElementsByClassName/TagName: بازگرداندن لیست زنده (live collection)
querySelectorAll: بازگرداندن لیست ایستا (static collection)

📌 تغییر محتوا و استایل عناصر

پس از انتخاب عناصر، می‌توانیم محتوا و ظاهر آنها را تغییر دهیم:

javascript

            // تغییر متن
titleElement.textContent = 'عنوان جدید';
// تغییر HTML داخلی
titleElement.innerHTML = '<span>عنوان با استایل</span>';
// تغییر استایل
titleElement.style.color = 'red';
titleElement.style.fontSize = '24px';
// تغییر کلاس‌ها
titleElement.classList.add('highlight'); // اضافه کردن کلاس
titleElement.classList.remove('highlight'); // حذف کلاس
titleElement.classList.toggle('highlight'); // تغییر وضعیت کلاس

            

نکات مهم:

textContent vs innerHTML: برای متن ساده از textContent استفاده کنید (امن‌تر)
استایل‌ها: نام ویژگی‌های CSS به صورت camelCase نوشته می‌شوند
کلاس‌ها: استفاده از classList روش بهتری نسبت به دسترسی مستقیم به className است

📌 ایجاد، حذف و ویرایش عناصر

می‌توانیم عناصر جدید ایجاد کرده، عناصر موجود را حذف یا جایگزین کنیم:

javascript

            // ایجاد عنصر جدید
const newParagraph = document.createElement('p');
newParagraph.textContent = 'این یک پاراگراف جدید است.';
// اضافه کردن به DOM
document.body.appendChild(newParagraph);
// حذف عنصر
const oldParagraph = document.querySelector('p');
oldParagraph.parentNode.removeChild(oldParagraph);
// جایگزینی عنصر
const newHeading = document.createElement('h2');
newHeading.textContent = 'عنوان جدید';
document.body.replaceChild(newHeading, titleElement);

            

روش‌های مدرن:

append/prepend: اضافه کردن چندین عنصر به ابتدا یا انتهای والد
before/after: درج عناصر قبل یا بعد از عنصر جاری
remove: حذف مستقیم عنصر بدون نیاز به دسترسی به والد

📌 تمرین عملی

یک صفحه ساده با دکمه‌ای ایجاد کنید که با کلیک روی آن:

javascript

            // 1. یک عنصر جدید به صفحه اضافه کند
// 2. رنگ پس‌زمینه صفحه را تغییر دهد
// 3. متن دکمه را به "کلیک شد!" تغییر دهد
// 4. یک کلاس به عنصر اضافه شده اضافه کند

            

راهنمای تمرین:

از document.createElement برای ساخت عنصر جدید استفاده کنید
از appendChild برای اضافه کردن عنصر به صفحه استفاده کنید
از style.backgroundColor برای تغییر رنگ پس‌زمینه استفاده کنید
از classList.add برای اضافه کردن کلاس استفاده کنید

📌 قدم بعدی

در درس بعدی با رویدادها در جاوااسکریپت آشنا خواهیم شد!

❮ قبلی بعدی ❯