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

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

توسط

۱۳۹۹-۱۰-۱۲

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

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

Free-Learn

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

1 کار با صفات عناصر در جاوا اسکریپت
2 کار با متد getAttribute
3 بدست آوردن صفت + مقدار بصورت مستقیم
4 کار با متد setAttribute
5 کار با متد removeAttribute

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

ما در این جلسه میخوایم با صفات عناصر ( تگ ها ) در جاوا اسکریپت کار کنیم و ببینیم چجوری میتونیم صفت یک تگ رو بدست بیاریم یا مثلا چجوری میشه یه صفت + مقدار برای یه تگ مشخص کرد.

در ادامه و تا پایان این جلسه میخوایم با متدهای زیر که برای کار با صفات می باشند کار کنیم :

getAttribute : بدست آوردن صفت + مقدار
بدست آوردن صفت + مقدار بصورت مستقیم
setAttribute : تنظیم صفت + مقدار
removeAttribute : حذف کردن صفت + مقدار

Free-Learn

کار با متد getAttribute

خب ما شاید بخوایم نام صفت یه تگ رو بدست بیاریم یا اصلا شاید بخوایم مقدار صفت یک تگ رو بدست بیاریم، باید چکار کنیم؟ خیلی خیلی راحت در جاوا اسکریپت میتونیم اینکارو انجام بدیم.

با استفاده از متد getAttribute میتونیم به راحتی مقدار صفت یک عنصر رو بدست آوریم.

شکل کلی برای استفاده از متد getAttribute :

Element.getAttribute( Name_Attribute );

1	Element.getAttribute( Name_Attribute );

Element : اون تگ یا عنصری که میخوایم صفتش بدست بیاریم
Name_Attribute : نام اون صفتی که میخوایم مقدارش بدست بیاریم

مثال شماره ۱ : بدست آوردن مقدار صفت href از تگ a ( لینک )

<script>

function Get(){
 var a = document.getElementById("MyLink");
 var result = document.getElementById("Result");
 
 result.innerHTML = a.getAttribute('href');
}

</script>

function Get(){

var a = document.getElementById("MyLink");

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

result.innerHTML = a.getAttribute('href');

}

</script>

امتحان کنید

مثال شماره ۲ : بدست آوردن مقدار صفت id و title از تگ P

<script>

function Get(){
 var a = document.getElementById("MyP");
 var result = document.getElementById("Result");
 
 var b = a.getAttribute('title');
 var c = a.getAttribute('id');
 result.innerHTML = "Title = " + b + "<br>" + "ID = " + c;
}

</script>

function Get(){

var a = document.getElementById("MyP");

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

var b = a.getAttribute('title');

var c = a.getAttribute('id');

result.innerHTML = "Title = " + b + "<br>" + "ID = " + c;

}

</script>

امتحان کنید

Free-Learn

بدست آوردن صفت + مقدار بصورت مستقیم

خب دوستان ما علاوه بر اون متد getAttribute ، یه روشی داریم که میتونیم بصورت مستقیم صفت و مقدار یک عنصر رو بدست آوریم، ولی خب اینم بگم که این روش بروی همه ی صفات عمل نمیکنه، ولی خب بروی اکثر صفات عمل میکنه و میتونه کارمون رو راه بندازه.

شکل کلی استفاده از این روش بصورت زیر می باشد :

Element.Name_Attribute;

1	Element.Name_Attribute;

Element : اون عنصر یا تگ
Name_Attribute : نام اون صفتی که میخوایم بدست بیاریم

مثال شماره ۱ : بدست آوردن صفت value از تگ input

<script>

function Get(){
 var a = document.getElementById("MyInput");
 var result = document.getElementById("Result");
 
 result.innerHTML = a.value;
}

</script>

function Get(){

var a = document.getElementById("MyInput");

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

result.innerHTML = a.value;

}

</script>

امتحان کنید

Free-Learn

کار با متد setAttribute

فک کنم از اسم این متد مشخص باشه که چکار میتونه کنه!؟ همونطور که از اسمش مشخصه با استفاده از این متد میتونیم برای یک تگ یک صفت + مقدار مشخص کنیم.

شکل کلی برای استفاده از این متد :

Element.setAttribute( Name , Value );

1	Element.setAttribute( Name , Value );

Name : نام صفت
Value : مقدار صفت

مثال شماره ۱ : ما یک تگ a ایجاد کردیم ولی خب براش href مشخص نکردیم، میخوایم با استفاده از جاوا اسکریپت صفت href بهمراه مقدار ( آدرس سایت فری لرن ) رو براش مشخص کنیم.

<script>

function Set(){
 var a = document.getElementById("MyLink");
 a.setAttribute('href','https://free-learn.ir/');
}

</script>

function Set(){

var a = document.getElementById("MyLink");

a.setAttribute('href','https://free-learn.ir/');

}

</script>

امتحان کنید

مثال شماره ۲ : تنظیم صفت src ( یا بطور کلی تغییر تصویر ) با کلیک بروی دکمه ( استفاده از روش مستقیم )

<script>

function Change(){
 var a = document.getElementById("MyImg");
 a.src = "logo.png";
}

</script>

function Change(){

var a = document.getElementById("MyImg");

a.src = "logo.png";

}

</script>

امتحان کنید

Free-Learn

کار با متد removeAttribute

این متد removeAttribute هم که دیگه مشخصه، با استفاده از آن میتوان صفت یک تگ رو حذف کرد.

شکل کلی :

Element.removeAttribute( Name_Attribute );

1	Element.removeAttribute( Name_Attribute );

Element : اون تگ یا عنصری که میخوایم صفتش رو حذف کنیم
Name_Attribute : نام اون صفتی که میخوایم حذف کنیم

مثال : حذف کردن صفت href از تگ a

<script>

function Del(){
 var a = document.getElementById("MyLink");
 a.removeAttribute('href');
}

</script>

function Del(){

var a = document.getElementById("MyLink");

a.removeAttribute('href');

}

</script>

امتحان کنید

Free-Learn

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