این آموزش در تاریخ ۱۴۰۱/۰۴/۲۳ آپدیت شده است.
آموزش متد createAttribute در DOM جاوااسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش متد createAttribute در DOM جاوااسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
متد createAttribute در DOM جاوااسکریپت
با استفاده از متد ()createAttribute میتونیم به راحتی برای یک تگ ، صفت ایجاد / تعریف نماییم.
با استفاده از متد setAttribute میتونیم یک صفت با مقدار مشخص را به یک تگ اضافه نماییم.
با استفاده از متد getAttribute میتونیم مقدار یک صفت را از یک تگ دریافت نماییم.
| مقدار برگشتی | برگشت شئ صفت از صفت ایجاد شده |
|---|---|
| نسخه DOM | DOM Level 1 |
Free-Learn
مثال از این متد
در ادامه میتوانید یک مثال از این متد را در زبان جاوا اسکریپت مشاهده نمایید.
مثال شماره ۱ : میخوایم با کلیک بروی یک دکمه، اول یه صفت src ایجاد کنیم بعدش مقدار ( مسیر آدرس عکس رو بهش ) بدیم، و در نهایت به تگ img اضافش کنیم
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<script> function Set(){ var MyImage , MyAttribute_Name , MyAttribute_Value; MyImage = document.getElementById("MyImg"); // src ایجاد صفت MyAttribute_Name = document.createAttribute("src"); // مشخص کردن مقدار داخل صفت MyAttribute_Name.value = "files/logo.png"; // اضافه کردن صفت + مقدارش به تگ MyImage.setAttributeNode(MyAttribute_Name); } </script> |
مثال شماره ۲ : اضافه کردن صفت class به یک تگ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<script> function Set(){ var MyH2 , MyClass; MyH2 = document.getElementById("MyH2"); // ایجاد صفت کلاس MyClass = document.createAttribute("class"); // مشخص کردن مقدار صفت کلاس MyClass.value = "free-learn"; // ست کردن صفت کلاس برای تگ MyH2.attributes.setNamedItem(MyClass); } </script> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از این متد در جاوااسکریپت پشتیبانی میکنند یا خیر.
| نام متد | Chrome | Firefox | Opera | Safari | Edge |
| ()createAttribute | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این متد در جاوااسکریپت بصورت زیر می باشد.
|
1 |
document.createAttribute( "Attribute_Name" ); |
Free-Learn
جدول پارامترها
در جدول زیر میتوانید، پارامترهایی را که میتوان در این متد استفاده کرد مشاهده نمایید.
| مقدار | توضیح |
|---|---|
| Attribute_Name | ضروری – نام اون صفتی که قراره ایجاد بشه |
Free-Learn
نکات و توضیحات
- این متد مقدار برگشتیش بصورت شئ صفت ( یا Attribute Object ) می باشد، که با استفاده از ویژگی name میتونیم نام صفت و با استفاده از ویژگی value میتونیم مقدار صفت رو بدست آوریم.
- با استفاده از متد ()setAttributeNode میتونیم یک صفت را به یک تگ اضافه نماییم. ( همانند مثال شماره ۱ )
- با استفاده از متد ()createElement میتونیم یک تگ جدید در صفحه ایجاد نماییم.
- با استفاده از متد ()createTextNode میتونیم متن داخل یک تگ را مشخص نماییم.
