این آموزش در تاریخ ۱۴۰۱/۰۹/۲۷ آپدیت شده است.
آموزش قدم به قدم DOM در جاوا اسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش قدم به قدم DOM در جاوا اسکریپت با من همراه باشید.
Free-Learn
آموزش قدم به قدم DOM در جاوا اسکریپت
خب اصلا DOM یعنی چی؟ کلمه DOM مخفف ( Document Object Model ) یا خودمونی ( مدل شئ صفحه یا سند ) می باشد، حالا منظورش از این کلمه چیه؟
میگه آقا وقتی یک صفحه در مرورگر لود میشه و میاد بالا، مرورگر از اون صفحه یک مدل شئ درست میکنه که این مدل شئ شامل تمامی تگ ها، صفت ها و.. موجود در صفحه می باشد.
که در نهایت و بطور کلی ما میتونیم از طریق همین مدل شئ ، به تگ ها و صفت های موجود در صفحه دسترسی پیدا کنیم و اونارو تغییر یا حذف و یا اضافه کنیم.
که خیلی راحت ما میتونیم با استفاده از یسری متدها یا ویژگی ها، میتونیم صفت های یک تگ رو مقدارشون رو تغییر بدیم یا صفت جدید با مقدار جدید بهشون بدیم، یا مثلا میتونیم تگ هارو در صفحه تعریف کنیم یا حذف و یا محتواشون رو تغییر بدیم و..
پس درکل و در یه کلام DOM یعنی دسترسی داشتن به صفحه و تغییر دادن تگ ها ، صفت های موجود در صفحه، مثلا میتونیم کاری کنیم که وقتی بروی دکمه ای کلیک شد صفت src که داخل تگ img هس عوض شه یا مثلا کاری کنیم که با کلیک بروی یه دکمه رنگ صفحه عوض شه و..
پس اینجوری میتونیم بگیم که DOM یعنی :
- ایجاد و تغییر تگ های موجود در صفحه
- ایجاد و تغییر صفت های موجود در صفحه
- ایجاد و تغییر استایل ( CSS ) تگ های موجود در صفحه
- ایجاد و تغییر رویدادهای فعلی موجود در صفحه
Free-Learn
دسته بندی متدهای DOM
خب همونطور که گفتم DOM یعنی یسری متد یا ویژگی که هرکدوم میتونن کاری انجام بدن، که سعی کردم این متدها یا ویژگی هارو دسته بندی کنم :
- انتخابگرها ( یعنی اینکه بتونیم یک تگ رو از صفحه انتخاب کنیم )
- گِره ها ( مثلا فلان تگ پدر بهمان تگ هس، یا مثلا فلان تگ برادر بهمان تگ هس )
- دستکاری کردن ( مثلا میتونیم محتوای دخل یک تگ رو تغییر بدیم یا کلا خوده تگ رو حذف کنیم )
- کار با صفت ها ( مثلا صفت جدید ایجاد کنیم یا مقدار یک صفت رو تغییر بدیم )
- کار با استایل یا CSS ( یعنی میتونیم به تگ های داخل صفحه استایل / CSS بدیم یا دستورات CSS رو تغییر بدیم )
- کار با رویداد ها ( مثلا میتونیم رویداد جدید تعریف کنیم یا حذف کنیم و یا تغییر بدیم )
خب دوستان ان شاالله در جلسات بعدی میریم تا با انواع روش های دسترسی به عناصر موجود در صفحه آشنا بشیم و ببینیم چجوری میتونیم عناصر موجود در صفحه را تغییر ، ایجاد و یا حذف نماییم.
