آموزش DOM در جاوااسکریپت | فصل ۱۲: کار با DOM (Document Object Model) به زبان ساده

اموزش رایگان جاوا اسکریپت از مقدماتی تا متوسط

مقدمه

اگر بخواهی با صفحه وب تعامل واقعی داشته باشی (مثلاً رنگ دکمه را عوض کنی، یک متن جدید به صفحه اضافه کنی یا یک المان را حذف کنی)، باید کار با DOM را بلد باشی. دنیای داینامیک وب مدیون DOM است! در این فصل یاد می‌گیری DOM چیست، چطور به کمک جاوااسکریپت با آن کار کنی و کارهای جذابی انجام بدی.

DOM چیست و چه کاربردی دارد؟

DOM یا Document Object Model یک ساختار درختی است که مرورگر از صفحه HTML می‌سازد. هر تگ (مثل <div>, <p>, <img> و حتی <body> و <html>) یک “گره” یا “Node” این درخت هست.
جاوااسکریپت از طریق DOM می‌تونه به این عناصر دسترسی پیدا کنه، بخونه، تغییر بده، اضافه یا حذف کنه.

۱. انتخاب المان‌ها در DOM

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

getElementById

ساده‌ترین راه، انتخاب بر اساس id عنصر:

var title = document.getElementById('main-title');

getElementsByClassName

برای گرفتن همه المان‌های با یک کلاس خاص (خروجی‌اش آرایه‌مانند است):

var items = document.getElementsByClassName('list-item');

getElementsByTagName

انتخاب همه تگ‌هایی از یک نوع:

var paragraphs = document.getElementsByTagName('p');

querySelector و querySelectorAll

ابزار قدرتمند برای انتخاب با CSS Selector:

var firstButton = document.querySelector('.my-btn');
var allButtons = document.querySelectorAll('.my-btn');
  • گاهی تنها نیاز به یک عنصر داری (querySelector).
  • اگر همه را بخواهی (مثل لیست دکمه‌ها)، از querySelectorAll استفاده کن.

۲. تغییر متن، ویژگی و استایل عناصر

تغییر متن عنصر

title.textContent = "سلام جاوااسکریپت!";

تغییر ویژگی‌ها

مثلاً لینک یا عکس:

var link = document.getElementById('my-link');
link.href = "https://example.com";

تغییر استایل CSS

با .style هر ویژگی CSS را می‌توانی تغییر بدی:

title.style.color = 'blue';
title.style.fontSize = '24px';

۳. ساخت و حذف عناصر جدید داخل DOM

ساخت یک عنصر جدید و اضافه به صفحه:

var newPara = document.createElement('p');     // ساخت یک <p>
newPara.textContent = "یک پاراگراف جدید!";
document.body.appendChild(newPara);           // اضافه کردن به آخر body

یا به یک div خاص:

var myDiv = document.getElementById('my-div');
myDiv.appendChild(newPara);

حذف عنصر از صفحه

myDiv.remove();    // حذف سریع در جاوااسکریپت مدرن

// روش قدیمی‌تر:
myDiv.parentNode.removeChild(myDiv);

۴. کار با کلاس‌ها (classList) در JS

مدیریت کلاس CSS مثل آب خوردن با classList:

title.classList.add('big-header');        // اضافه کردن کلاس
title.classList.remove('old-style');      // حذف یک کلاس
title.classList.toggle('highlight');      // اگر هست برمی‌داره، اگر نیست اضافه می‌کنه

۵. نکات سریع و ترفند‌های مهم DOM

  • دسترسی به المان‌ها با نام متغیرشان فقط بعد از لود کامل صفحه کامل می‌شود (مثلاً در انتهای فایل JS یا با رویداد DOMContentLoaded).
  • اگر چند عنصر را با querySelectorAll انتخاب کردی، خروجی یک NodeList است. می‌توانی رویش forEach بزنی.
  • استفاده زیاد و بی‌رویه از دستکاری DOM می‌تواند سرعت سایت را پایین بیاورد!

تمرین سریع

یک دکمه بساز که وقتی کلیکش کردی، یک متن جدید زیرش به صفحه اضافه بشود.

راهنمایی:
۱. دکمه را توسط ID بگیر
۲. رویداد addEventListener برای کلیک اضافه کن
۳. عنصر جدید بساز و به جایی از صفحه اضافه کن

نمونه کد (Roadmap):

var myBtn = document.getElementById('btn');
myBtn.addEventListener('click', function() {
  var newText = document.createElement('p');
  newText.textContent = "یک متن با کلیک شما اضافه شد!";
  document.body.appendChild(newText);
});

جمع‌بندی

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

محمد وب‌سایت
مطالب مشابه

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *