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

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

توسط

۱۴۰۰-۰۱-۱۷

این آموزش در تاریخ ۱۴۰۱/۰۴/۳۱ آپدیت شده است.

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

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

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

Free-Learn

آنچه در این جلسه میخوانید :

1 ویژگی attributes در DOM جاوااسکریپت
2 مثال از این ویژگی
3 پشتیبانی مرورگرها
4 شکل نوشتاری
5 نکات و توضیحات

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

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

از ویژگی و متدهای زیر میتوان در ویژگی attributes استفاده کرد و به راحتی نام ، مقدار و تعداد صفت های یک تگ رو بدست آورد :
item() – برای انتخاب صفت براساس شماره ایندکس
name() – برای گرفتن نام صفت
value() – برای گرفتن مقدار صفت
length() – برای بدست آوردن تعداد کل صفات یک تگ
setNamedItem() – برای تنظیم نام صفت جدید
getNamedItem() – برای انتخاب یک صفت از طریق نام
removeNamedItem() – برای حذف کردن یک صفت از طریق نام

مقدار برگشتی	برگشت یک شئ از صفات موجود در یک تگ
نسخه DOM	DOM Level 1

Free-Learn

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

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

مثال شماره ۱ : انتخاب دومین صفت از تگ با استفاده از متد ()item ، بعدش بدست آوردن نام صفت + مقدار

<script>

function Get(){
 var MyTag = document.getElementById("MyH2");
 var Result = document.getElementById("Result");
 
 // گرفتن نام دومین صفت
 var GetName = MyTag.attributes.item(1).name;
 
 // گرفتن مقدار داخل دومین صفت
 var GetValue = MyTag.attributes.item(1).value;
 
 Result.innerHTML = GetName + " = " + GetValue;
}

</script>

function Get(){

var MyTag = document.getElementById("MyH2");

var Result = document.getElementById("Result");

// گرفتن نام دومین صفت

var GetName = MyTag.attributes.item(1).name;

// گرفتن مقدار داخل دومین صفت

var GetValue = MyTag.attributes.item(1).value;

Result.innerHTML = GetName + " = " + GetValue;

}

</script>

امتحان کنید

مثال شماره ۲ : بدست آوردن تعداد عددی کل صفت های تگ H2 ( یعنی میخوایم ببینیم تگ H2 چه تعداد صفت داره )

<script>

function Get(){
 var myh2 = document.getElementById("MyH2");
 var Result = document.getElementById("Result");
 
 // بدست آوردن تعداد کل صفت ها
 var Tedad = myh2.attributes.length;
 Result.innerHTML = Tedad;
}

</script>

function Get(){

var myh2 = document.getElementById("MyH2");

var Result = document.getElementById("Result");

// بدست آوردن تعداد کل صفت ها

var Tedad = myh2.attributes.length;

Result.innerHTML = Tedad;

}

</script>

امتحان کنید

مثال شماره ۳ : با استفاده از حلقه for میخوایم کاری کنیم که لیست تمامی صفت های داخل یک تگ رو بدست آوریم، یعنی نام صفت + مقدار

<script>

function Get(){
 var MyH2, Result, MyText, MyLength, i;
 MyH2 = document.getElementById("MyH2");
 Result = document.getElementById("Result");
 MyText = "";
 MyLength = MyH2.attributes.length;
 
 for (i = 0; i < MyLength; i++){
  MyText = MyText + MyH2.attributes[i].name + " = " + MyH2.attributes[i].value + "<br>";
 }
 Result.innerHTML  = MyText;
}

</script>

function Get(){

var MyH2, Result, MyText, MyLength, i;

MyH2 = document.getElementById("MyH2");

Result = document.getElementById("Result");

MyText = "";

MyLength = MyH2.attributes.length;

for (i = 0; i < MyLength; i++){

MyText = MyText + MyH2.attributes[i].name + " = " + MyH2.attributes[i].value + "<br>";

}

Result.innerHTML = MyText;

}

</script>

امتحان کنید

مثال شماره ۴ : اضافه کردن صفت class بهمراه مقدار مشخص شده به یک تگ

<script>

function Set(){
 var MyH2 , MyClass;
 MyH2 = document.getElementById("MyH2");
 
 // ایجاد صفت کلاس
 MyClass = document.createAttribute("class");
 
 // مشخص کردن مقدار صفت کلاس
 MyClass.value = "free-learn";

 // ست کردن صفت کلاس برای تگ
 MyH2.attributes.setNamedItem(MyClass);
}

</script>

function Set(){

var MyH2 , MyClass;

MyH2 = document.getElementById("MyH2");

// ایجاد صفت کلاس

MyClass = document.createAttribute("class");

// مشخص کردن مقدار صفت کلاس

MyClass.value = "free-learn";

// ست کردن صفت کلاس برای تگ

MyH2.attributes.setNamedItem(MyClass);

}

</script>

امتحان کنید

مثال شماره ۵ : حذف صفت Class از تگ

<script>

function Remove(){
 var MyH2 = document.getElementById("MyH2");
 MyH2.attributes.removeNamedItem("class");
}

</script>

function Remove(){

var MyH2 = document.getElementById("MyH2");

MyH2.attributes.removeNamedItem("class");

}

</script>

امتحان کنید

Free-Learn

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

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

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

Free-Learn

شکل نوشتاری

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

Element.attributes;

1	Element.attributes;

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

Free-Learn

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

Free-Learn

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

Free-Learn

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

Free-Learn

شکل نوشتاری

Free-Learn

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

Free-Learn

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

آموزش قدم به قدم DOM در جاوا اسکریپت

نحوه انتخاب عناصر از صفحه در جاوا اسکریپت

کار با گره ها یا Nodes در جاوا اسکریپت

نحوه دسترسی به گره ها در جاوا اسکریپت

کار با innerHTML در جاوا اسکریپت

آموزش کار با عناصر در زبان جاوا اسکریپت

کار با صفات عناصر در جاوا اسکریپت

نحوه استایل دهی عناصر در جاوا اسکریپت

آموزش ویژگی transition در CSS