🟧 DOM Manipulation در جاوااسکریپت — راهنمای جامع برای شروع حرفه‌ای
فهرست مطالب
- ✅ DOM چیست؟
- ✅ چرا DOM Manipulation مهم است؟
- ✅ چه کارهایی با DOM Manipulation انجام می‌دهیم؟
- 🔶 ۱. انتخاب المان‌ها (Selecting Elements)
- 🔶 ۲. تغییر متن یا محتوای المان‌ها
- 🔶 ۳. تغییر استایل‌ها (CSS Manipulation)
- 🔶 ۴. تغییر Attributes المان‌ها
- 🔶 ۵. اضافه یا حذف المان‌ها
- 🔶 ۶. مدیریت رویدادها روی DOM (Event Handling)
- 🔶 ۷. بهینه‌سازی عملکرد DOM (Performance)
- 🔶 ۸. امنیت در DOM Manipulation (XSS Prevention)
- 🎯 جمع‌بندی
اگر تا به حال یک وب‌سایت را دیده باشی که وقتی روی دکمه‌ای کلیک می‌کنی، رنگش عوض می‌شود، متنی ظاهر می‌شود یا محتوای صفحه بدون رفرش تغییر می‌کند، در واقع داری نتیجه‌ی DOM Manipulation را می‌بینی.
DOM Manipulation یکی از جذاب‌ترین و کاربردی‌ترین مهارت‌ها در جاوااسکریپت است که به شما اجازه می‌دهد صفحات وب را پویا، زنده و تعاملی بسازید. در این مقاله می‌خواهیم بفهمیم DOM چیست، چرا مهم است و چطور می‌شود آن را دستکاری کرد. همچنین نقشه‌ی راه یادگیری DOM Manipulation را ترسیم می‌کنیم تا بدانی در مقالات فرزند چه چیزهایی را باید عمیق‌تر یاد بگیری.
✅ DOM چیست؟
DOM مخفف Document Object Model است.
به‌زبان ساده، وقتی مرورگر یک فایل HTML را بارگذاری می‌کند، آن را به یک درخت (Tree Structure) تبدیل می‌کند. هر تگ HTML (مثل <div>, <p>, <a>) به‌صورت یک Node در این درخت ذخیره می‌شود.
مثلاً این HTML:
<body>
<h1>Hello</h1>
<p>Welcome</p>
</body>
تبدیل می‌شود به یک درخت مثل زیر:
Document
└── html
└── body
├── h1
└── p
جاوااسکریپت به ما این امکان را می‌دهد که این درخت را بخوانیم، تغییر دهیم یا المان‌های جدید به آن اضافه کنیم. همین قدرت باعث می‌شود وب‌سایت‌ها تعاملی شوند.
✅ چرا DOM Manipulation مهم است؟
- محتوای صفحات را بدون رفرش تغییر می‌دهد.
- امکان ساخت افکت‌های زیبا مثل اسلایدر، مودال، منوهای متحرک را می‌دهد.
- بهبود تجربه کاربری (UX)
- صرفه‌جویی در منابع سرور (چون نیاز به رفرش کامل نیست)
- پایه‌ی بسیاری از فریم‌ورک‌های مدرن مثل React, Vue, Angular است.
✅ چه کارهایی با DOM Manipulation انجام می‌دهیم؟
حالا ببینیم به‌صورت کلی چه کارهایی با DOM انجام می‌دهیم. در این مقاله به‌صورت خلاصه توضیح می‌دهیم و در مقالات فرزند، هر بخش را عمیق‌تر بررسی خواهیم کرد.
🔶 ۱. انتخاب المان‌ها (Selecting Elements)
اولین قدم برای تغییر صفحه، پیدا کردن المانی است که می‌خواهیم دستکاری کنیم.
راه‌های مختلفی برای انتخاب المان وجود دارد، مثل:
getElementById()→ انتخاب بر اساس idgetElementsByClassName()→ انتخاب بر اساس classgetElementsByTagName()→ انتخاب بر اساس تگquerySelector()→ انتخاب المان با CSS SelectorquerySelectorAll()→ انتخاب همه المان‌ها با CSS Selector
هرکدام از این روش‌ها ویژگی‌ها و تفاوت‌های خاص خود را دارند که در مقاله فرزند روش‌های انتخاب المان‌ها در DOM توضیح خواهیم داد.
🔶 ۲. تغییر متن یا محتوای المان‌ها
بعد از انتخاب المان، می‌توانیم متن یا محتوای داخل آن را تغییر دهیم. مثلاً:
innerHTML→ تغییر یا خواندن کل HTML داخل المان.textContent→ تغییر یا خواندن متن خالص داخل المان.innerText→ مشابه textContent اما کمی وابسته به استایل و نمایش.
مثلاً:
document.querySelector("h1").textContent = "سلام دنیا!";
تفاوت این متدها بسیار مهم است (از نظر امنیت و رفتار)، که در مقاله فرزند تغییر محتوای المان‌ها در DOM مفصل بررسی می‌کنیم.
🔶 ۳. تغییر استایل‌ها (CSS Manipulation)
می‌توانیم ظاهر المان‌ها را تغییر دهیم. دو راه اصلی وجود دارد:
الف) تغییر مستقیم استایل
element.style.color = "red";
ب) اضافه یا حذف کلاس‌ها
روش بهتر این است که کلاس CSS را اضافه یا حذف کنیم. چون مدیریت استایل با CSS ساده‌تر است:
element.classList.add("active");
element.classList.remove("hidden");
element.classList.toggle("dark-mode");
موضوع مدیریت استایل‌ها در DOM مقاله فرزند خودش را دارد.
🔶 ۴. تغییر Attributes المان‌ها
Attributes همان چیزهایی هستند که داخل تگ‌های HTML می‌بینی، مثل href، src، alt و غیره. مثلاً:
<a href="https://google.com">Google</a>
می‌توانیم این attributeها را تغییر دهیم:
link.setAttribute("href", "https://bing.com");
یا بخوانیم:
let linkHref = link.getAttribute("href");
یا حتی حذف کنیم:
link.removeAttribute("href");
در مقاله فرزند مدیریت Attributeها در DOM تفاوت Attribute و Property را هم توضیح خواهیم داد.
🔶 ۵. اضافه یا حذف المان‌ها
گاهی لازم است المان جدید بسازیم یا المان موجود را حذف کنیم. مثلاً وقتی می‌خواهیم لیست محصولات جدید را از سرور بگیریم و به صفحه اضافه کنیم.
- ساخت المان:
let newElement = document.createElement("div"); newElement.textContent = "Hello!"; - اضافه کردن به صفحه:
document.body.appendChild(newElement); - حذف المان:
element.remove();
🔶 ۶. مدیریت رویدادها روی DOM (Event Handling)
اغلب DOM Manipulation با رویدادها (Eventها) گره خورده است. مثلاً:
- کلیک روی دکمه
- حرکت موس
- تایپ در input
- ارسال فرم
برای مدیریت این رویدادها از addEventListener() استفاده می‌کنیم:
button.addEventListener("click", () => {
console.log("Button clicked!");
});
در مقاله فرزند مدیریت رویدادها در DOM به جزئیات Event Object و جلوگیری از اتفاقات پیش‌فرض خواهیم پرداخت.
🔶 ۷. بهینه‌سازی عملکرد DOM (Performance)
دستکاری زیاد DOM می‌تواند باعث افت سرعت وب‌سایت شود. تکنیک‌های زیر به شما کمک می‌کنند:
- استفاده از DocumentFragment
- کاهش Reflow و Repaint
- Virtual DOM در فریم‌ورک‌ها
- استفاده کمتر از innerHTML برای تغییرات بزرگ
در مقاله فرزند بهینه‌سازی عملکرد DOM تمام این تکنیک‌ها را بررسی می‌کنیم.
🔶 ۸. امنیت در DOM Manipulation (XSS Prevention)
یکی از مهم‌ترین مباحث DOM Manipulation امنیت است. مثلاً اگر داده‌های ورودی کاربر را مستقیماً در innerHTML قرار دهیم، ممکن است کاربر کد مخرب (مثل اسکریپت) وارد کند و سایت را هک کند. این حمله را XSS (Cross-Site Scripting) می‌گویند.
مثلاً:
element.innerHTML = userInput;
راهکارهایی برای جلوگیری از این مشکل وجود دارد که در مقاله فرزند امنیت در DOM Manipulation توضیح خواهیم داد.
🎯 جمع‌بندی
DOM Manipulation مثل چوب جادو در دستان یک برنامه‌نویس است. هر کاری که باعث می‌شود وب‌سایت‌ها زنده شوند، به کمک این مهارت انجام می‌شود. اما همان‌طور که دیدیم، این مقوله بسیار وسیع است و هر بخش آن ارزش یادگیری عمیق را دارد.
در مقالات فرزند، هر یک از این بخش‌ها را با مثال‌های حرفه‌ای، نکات پرفورمنس و امنیت و تکنیک‌های پیشرفته بررسی خواهیم کرد.