مقدمه آموزش مدل DOM
متد ( ) getElementByTagName :
در قسمت قبل با متد getElementById و
نحوه کار با آن آشنا شديد . در اين قسمت به توضيح يکی ديگر از روش های دسترسی به عناصر
در صفحات HTML آشنا می شويد .
اين متد عناصر را بر حسب تگ سازنده آنها در صفحه پيدا می کند . اين متد کليه عناصری
را که تگ سازنده آنها را در پرانتز مقابل آن تعريف کرده باشيد ، به صورت آرايه ای از
عناصر ( گره ها ) بر می گرداند . نحوه کلی اسفاده از اين عنصر به صورت زير است :
|
Syntax |
documnet.getElementByTagName ( " تگ سازنده عنصر يا عناصر
مورد نظر " ) ;
|
مثال : برای مثال شما می خواهيد به کليه عناصر از جنس پاراگراف در
يک صفحه که به وسيله تگ < p > ساخته می شوند ، دسترسی داشته باشيد . برای اين
منظور از قطعه کد زير بايد استفاده کنيد :
|
document.getElementByTagName( "p"
) ;
|
هانطور که گفتيم ، متد getElementByTagName ، عناصری در داخل يک صفحه را ، که تگ سازنده
آنها را در پرانتز مقابل اين متد تعيين کرده باشيد را به صورت آرايه ای از رشته ها
بر می گرداند . بنابراين می توان با استفاده از يک انديس به هر يک از اعضای اين آرايه
دسترسی پيدا کرد . به عبارت ديگر اگر ما به دنبال عناصر پاراگراف ( تگ p ) در درون
يک صفحه باشيم و تعداد 5 پاراگراف در آن صفحه موجود باشد ، خروجی اين متد يک آرايه
پنج عضوی از id پاراگراف بوده ، که آنها را به ترتيب ، شماره ( انديس ) گذاری کرده
است . پس می توانيم از اين ليست از عناصر هانند آرايه استفاده نماييم .
برای اين منظور ابتدا بايد ليست عناصر را در يک متغير به روش زير ذخيره نماييم :
|
Syntax |
var نام يک متغير = getElementByTagName
( تگ سازنده عناصر مورد نظر ) ;
|
مثال : برای مثال ليست عناصر < p > را در يک آرايه به نام MyP
ذخيره کرده ايم :
|
var MyP= getElementByTagName
( " p " ) ;
|
بنابراين اکنون ما دارای يک آرايه از کليه عناصری که با تگ < p > در يک صفحه
ساخته می شوند ، هستيم و می توانيم به هر يک از آنها به وسيله يک انديس دسترسی داشته
باشيم . برای درک بهتر به مثال زير توجه نماييد :
مثال : فرض کنيد در يک صفحه HTML که دارای کد فرضی زير است ، دارای
3 پاراگراف ( ساخته شده با تگ < p > ) با id های خاص خود و به ترتيب برابر با
Ex2 , Ex1 و Ex3 هستيم . حال می خواهيم در انتهای صفحه متن دومين پاراگراف از مجموع
کليه پارگراف های صفحه را در خروجی مجددا چاپ نماييم .
برای اين منظور ابتدا ليست ( آرايه ) کليه پاراگراف ها را در يک متغير فرضی به نام
MyP ذخيره کرده و سپس در دستور خروجی به دومين عضو اين آرايه
که در واقع دومين پاراگراف موجود در آن صفحه است ، دسترسی پيدا کرده و متن درون آن
را در خروجی چاپ می کنيم :
<html>
<head>
<title>Title of the Page</title>
</head>
<body>
<p id="Ex1">
HTML is designing language of web
</p>
<p id="Ex2">
Java Script is a client side language
</p>
<p id="Ex3">
ASP.NET is a server side language
</p>
<script type="text/javascript">
var MyP = document.getElementsByTagName ( "p"
) ;
document.write ( MyP[1].innerText + " . It's code excute in copmuter of the
visitor . " );
</script>
</body>
</html>
|
|
HTML is designing language of web
Java Script is a client side language
ASP.NET is a server side language
|
مثال 2 : مثال بالا را با يک حالت جالب ديگر برای درک بهتر کاربرد
متد getElementByTagName بازنويسی کرده ام .
در اين مثال نيز فرض کنيد که دارای همان صفحه با همان کد و پاراگراف ها هستيم . در
اينجا نيز ابتدا ليست پاراگراف ها را در يک متغير فرضی به نام MyList
ذخيره کرده ايم . سپس با استفاده از يک حلقه ساده ، متن درون تمامی 3 پاراگراف را به
صورت يک ليست که در ابتدای هر پاراگراف شماره آن را نيز قرار داده ايم ، چاپ کرده ايم
. به کد مثال دقت کنيد :
توجه : در اين مثال از خاصيت length
متغير آرايه ای MyList استفاده کرده ايم . اين خاصيت طول يا
به عبارت ديگر تعداد اعضای متغير آرايه ای را شامل می شود .
<html>
<head>
<title>Title of the Page</title>
</head>
<body>
<p id="Ex1">
HTML is designing language of web
</p>
<p id="Ex2">
Java Script is a client side language
</p>
<p id="Ex3">
ASP.NET is a server side language
</p>
<script type="text/javascript">
var MyP
= document.getElementsByTagName ( "p"
) ;
for ( i = 0 , j =
1 ; i < MyP.length
; i ++ , j ++)
{
document.write ( j + " . " + MyP[ i ].innerText + "<br /> " );
}
</script>
</body>
</html>
|
|
HTML is designing language of web
Java Script is a client side language
ASP.NET is a server side language
1 . HTML is designing language of web
2 . Java Script is a client side language
3 . ASP.NET is a server side language
|