اگه تا حالا شده بخوای یه دکمه توی صفحهات بذاری که با کلیک روش یه چیزی عوض بشه، یا فرمی بسازی که بدون رفرش صفحه اطلاعات رو بفرسته، یعنی داری به DOM نیاز پیدا میکنی. دام همون پلیست بین کد جاوااسکریپت و عناصر HTML؛ چیزی که بهت اجازه میده صفحه وب رو زند...
آموزش کار کردن با دام (Document Object Model)
اگه تا حالا شده بخوای یه دکمه توی صفحهات بذاری که با کلیک روش یه چیزی عوض بشه، یا فرمی بسازی که بدون رفرش صفحه اطلاعات رو بفرسته، یعنی داری به DOM نیاز پیدا میکنی. دام همون پلیست بین کد جاوااسکریپت و عناصر HTML؛ چیزی که بهت اجازه میده صفحه وب رو زنده و پویا کنی. 🧩
توی این دوره از مباحث پایه شروع میکنیم و کمکم میریم سراغ کارهای واقعیتر. یعنی همون چیزهایی که توی پروژههای دانشگاهی یا فریلنسری واقعاً به کارت میاد.
توی این دوره چی یاد میگیری؟
آشنایی با DOM: مفاهیم بنیادی، ساختار درختمانند و اینکه صفحه وب چطور توی این ساختار نمایش داده میشه
جستجو در DOM: از روشهای ساده مثل getElementById تا روشهای قویتر مثل querySelector و querySelectorAll
پیمایش در DOM: پیدا کردن عناصر والد، فرزند و همسایه به شکل مؤثر
ویرایش عناصر: تغییر محتوا با innerHTML و insertAdjacentHTML، ساخت عنصر جدید با createElement، کار با Fragmentها و درج، حذف، جایگزینی و کپی عناصر
استایلدهی: تغییر Attributeها، کنترل استایل با CSS و مدیریت کلاسها
پردازش رویدادها: اضافه و حذف Event Listener، مدیریت رویدادهای کیبورد، درک Event Bubbling و Capturing و پیادهسازی Event Delegation
کار با فرمها: مدیریت ورودیهای مختلف مثل متن، select، رادیو و چکباکس، پردازش آپلود فایل، کار با Query String، JSON و multipart/form-data
چرا این دوره به کارت میاد؟
فرض کن میخوای یه لیست کارهای روزانه (To-Do List) بسازی. بدون DOM نمیتونی آیتم جدید اضافه کنی، تیک بزنی یا حذفش کنی. یا مثلاً یه فرم ثبتنام داری و میخوای قبل از ارسال، ورودیها رو اعتبارسنجی کنی. همه اینها با همون مفاهیمی حل میشن که توی این دوره یاد میگیری.
نکته جالبش اینجاست که بعد از یادگیری DOM، تازه میفهمی فریمورکهایی مثل React یا Vue زیر پوستهشون دارن همین کارها رو انجام میدن. پس این دوره پایهی خوبیه برای هر مسیری که بعداً انتخاب کنی.
این دوره مناسب چه کسانیه؟
توسعهدهندگان وب در سطح مبتدی و متوسط
کسانی که میخوان مهارتشون توی ساخت صفحات وب پویا رو یه پله بالاتر ببرن
هر کسی که علاقه داره ساختار و دستکاری عناصر HTML رو اصولی یاد بگیره
مشخصات دوره
ویژگی
توضیح
عنوان
آموزش کار کردن با دام (Document Object Model)
سطح
مبتدی تا متوسط
تعداد فصلها
۳ فصل
مجموع جلسات
۳۵ جلسه
مجموع زمان
حدود ۱ ساعت و ۵۱ دقیقه
وبسایت
مکتبخونه
وضعیت قیمت
تخفیف ویژه
سرفصلهای دوره
شماره
عنوان فصل
تعداد جلسات
مدت زمان
۱
جستجوی آیتمها در دام – Querying and Traversing the DOM
۶ جلسه
۰۰:۲۴ ساعت
۲
ویرایش دام – Working with the DOM
۱۳ جلسه
۰۰:۴۱ ساعت
۳
استفاده از ایونتها – Working with Events
۱۶ جلسه
۰۰:۴۶ ساعت
بعد از این دوره چی به دست میاری؟
آخر دوره، میتونی صفحات وب تعاملی و پویا با مفاهیم DOM بسازی. یعنی از یه صفحه استاتیک ساده، میرسی به چیزی که کاربر باهاش حرف میزنه و صفحه هم جواب میده. اگه دنبال یه شروع درست برای فرانتاند هستی، این دوره با قیمت تخفیفخوردهش میتونه نقطهی خوبی باشه. 📌