آموزش ویژگی attributes در DOM جاوااسکریپت

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی attributes در DOM جاوااسکریپت با من همراه باشید.

ویژگی attributes در DOM جاوااسکریپت

Free-Learn

ویژگی attributes در DOM جاوااسکریپت

با استفاده از ویژگی attributes میتونیم به مجموعه ای از گره های صفت یک عنصر ( یا تگ ) از طریق شماره ایندکس ( یا Index ) دسترسی پیدا نماییم و اونهارو همانند یک شئ NamedNodeMap برگشت بدیم.

با استفاده از ویژگی و متدهای زیر به راحتی میتوان نام ، مقدار و تعداد گره های صفت یک عنصر رو بدست آورد :

  • item() – برای بدست آوردن صفت براساس شماره ایندکس
  • name() – برای بدست آوردن نام صفت
  • value() – برای بدست آوردن مقدار صفت
  • length() – برای بدست آوردن تعداد کل صفات
  • setNamedItem() – برای تنظیم صفت جدید
  • getNamedItem() – برای گرفتن صفت
  • removeNamedItem() – برای حذف کرن صفت
مقدار برگشتی برگشت یک شئ از صفات موجود در یک تگ
نسخه DOM Core Level 1 Node Object

Free-Learn

مثال از این ویژگی

در ادامه میتوانید یک مثال از این ویژگی را در زبان جاوا اسکریپت مشاهده نمایید.

مثال شماره ۱ : بدست آوردن نام + مقدار صفت Class از تگ H2 با استفاده از شماره ایندکس

امتحان کنید

مثال شماره ۲ : بدست آوردن نام و مقدار دومین صفت از یک تگ به کمک متد ()item و ویژگی name و ویژگی value

امتحان کنید

مثال شماره ۳ : بدست آوردن تعداد کل صفت های یک تگ با استفاده از ویژگی length

امتحان کنید

مثال شماره ۴ : بدست آوردن تمامی صفت های تگ + مقدارشون ( با استفاده از حلقه for )

امتحان کنید

مثال شماره ۵ : تنظیم مقدار جدید برای صفت class

امتحان کنید

مثال شماره ۶ : با کلیک بروی یک دکمه، تصویر ( تگ img ) تغییر پیدا میکند

امتحان کنید

مثال شماره ۷ : ایجاد حالت شب یا نایت مود با استفاده از متدهای setNamedItem و removeNamedItem

امتحان کنید

توضیح مثال بالا :

خب در مثال بالا اومدیم ۲تا دکمه درست کردیم یکی برای حالت شب و دیگری حالت روز، یعنی وقتی روی ” دکمه حالت شب ” کلیک میشه حالت شب فعال میشه و وقتی هم روی ” دکمه حالت روز ” کلیک میشه، حالت روز فعال میشه.

یک آی دی یا ID بنام mybody برای تگ Body مشخص کردیم بعدش در خط ۵ اومدیم و تگ body رو گرفتیم که در ادامه روش عملیات انجام بدیم.

در خط ۶ اومدیم و یک صفت جدید ( صفت کلاس ) رو تعریف کردیم و در خط ۷ اومدیم به همین صفت کلاسی که درست کردیم مقدار ” night-mode ” دادیم.

و در نهایت در خط ۸ با استفاده از متد setNamedItem اومدیم و صفتی که درست کردیم ( صفت class ) رو به تگ Body اختصاص دادیم، و برای حالت روز هم اومدیم با استفاده از متد removeNamedItem صفت class رو از تگ Body حذف کردیم.

Free-Learn

پشتیبانی مرورگرها

در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از این ویژگی در جاوااسکریپت پشتیبانی میکنند یا خیر.

نام ویژگی Chrome Firefox Opera Safari IE
attributes بله بله بله بله بله

Free-Learn

شکل نوشتاری

نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در جاوااسکریپت بصورت زیر می باشد.

  • Index_Number : شماره ایندکس یا جایگاه صفت

Free-Learn

نکات و توضیحات

  • در مثال شماره ۷ من اومدم و حالت شب رو ایجاد کردم، خب بطور کلی بخوام بگم حالت شب رو میشه به روش های مختلفی درست کرد ، هدفم این بود که در مثال شماره ۷ نشون بدم که بله میشه از متدهای setNamedItem  و removeNamedItem هم حالت شب درست کرد.
  • با استفاده از متد getNamedItem میشه یک نمونه دیگه از حالت شب رو ایجاد کرد. ( مشاهده مثال )

Free-Learn

دریافت PDF یا پرینت این مطلب