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

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

توسط

۱۳۹۹-۱۰-۳۰

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

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

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

Free-Learn

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

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

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

با استفاده از ویژگی length میتونیم تعداد کل ( عددی ) گره های موجود در یک عنصر رو بصورت شئ NamedNodeMap برگشت بدیم. ( یا بدست بیاوریم )

با استفاد از متد ()item نیز میتونیم به راحتی با استفاده از شماره جایگاه یا ایندکس ( Index ) ، به یک گره صفت خاص دسترسی پیدا نماییم.

مقدار برگشتی	یک عدد که نشان دهنده تعداد کل گره ها می باشد
نسخه DOM	Core Level 1

Free-Learn

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

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

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

<script>

function MyFunction(){
 var a , myh2 , result;
 myh2 = document.getElementById("MyH2");
 result =document.getElementById("Result");
 
 a = myh2.attributes.length;
 result.innerHTML = a; // خروجی میشه 4
}

</script>

function MyFunction(){

var a , myh2 , result;

myh2 = document.getElementById("MyH2");

result =document.getElementById("Result");

a = myh2.attributes.length;

result.innerHTML = a; // خروجی میشه 4

}

</script>

امتحان کنید

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

در مثال بالا ما میخوایم ببینیم چه تعداد صفت در تگ H2 وجود داره، یعنی تعداد کل عددی صفت ها.

خیلی راحت با استفاده از ویژگی length اینکارو انجام دادیم و در خروجی باید عدد ۴ چاپ بشه و بله درسته چون ما ۴ عدد صفت در تگ H2 داریم. صفت های class – id – title – style

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

<script>

function tedad_form(){
 var myform;
 myform = document.forms.length;
 alert( "تعداد کل فرم های درون صفحه = " + myform );
}

</script>

function tedad_form(){

var myform;

myform = document.forms.length;

alert( "تعداد کل فرم های درون صفحه = " + myform );

}

</script>

امتحان کنید

مثال شماره ۳ : بدست آوردن تعداد کل تصاویر ( تگ img ) که درون صفحه قرار دارند

<script>

function Tedad_Tasavir(){
 var myimg , result;
 myimg = document.images.length;
 result = document.getElementById("Result");
 result.innerHTML = "تعداد کل تصاویر موجود در صفحه = " + myimg ;
}

</script>

function Tedad_Tasavir(){

var myimg , result;

myimg = document.images.length;

result = document.getElementById("Result");

result.innerHTML = "تعداد کل تصاویر موجود در صفحه = " + myimg ;

}

</script>

امتحان کنید

Free-Learn

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

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

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

Free-Learn

شکل نوشتاری

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

NamedNodeMap.length

1	NamedNodeMap.length

Free-Learn

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

این ویژگی یک ویژگی فقط خواندنی یا Read-Only می باشد.
با استفاده از ویژگی value در جاوااسکریپت میتونیم مقدار یک صفت رو بصورت شئ NamedNodeMap بدست آوریم.
با استفاده از ویژگی name در جاوااسکریپت میتونیم نام یک صفت رو بصورت شئ NamedNodeMap بدست آوریم.

Free-Learn

مثال های بیشتر

مثال شماره ۱ : بدست آوردن هم نام هم مقدار و هم تعداد کل صفت های موجود در یک عنصر

<script>

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

</script>

function MyFunction(){

var myh2 , result , txt , i;

myh2 = document.getElementById("MyH2");

result = document.getElementById("Result");

var txt = "";

for (i = 0; i < myh2.attributes.length; i++){

txt = txt + myh2.attributes[i].name + " = " + myh2.attributes[i].value + "<br>";

}

result.innerHTML = txt;

}

</script>

امتحان کنید

Free-Learn

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