آموزش برنامه نویسی ، پایگاه داده sql server
آموزشگاه برنامه نویسی تحلیل داده : دوره های آموزشی برنامه نویسی و طراحی وب ASP.Net , C# , HTML , CSS , SQL Server


آموزشگاه برنامه نویسی مجتمع فنی تهران میرداماد : دوره های آموزشی برنامه نویسی و طراحی وب ASP.Net , C# , HTML , CSS , SQL Server

مقدمه آموزش مدل DOM

متد ( ) getElementByTagName :

در قسمت قبل با متد getElementById و نحوه کار با آن آشنا شديد . در اين قسمت به توضيح يکی ديگر از روش های دسترسی به عناصر در صفحات HTML آشنا می شويد .
اين متد عناصر را بر حسب تگ سازنده آنها در صفحه پيدا می کند . اين متد کليه عناصری را که تگ سازنده آنها را در پرانتز مقابل آن تعريف کرده باشيد ، به صورت آرايه ای از عناصر ( گره ها ) بر می گرداند . نحوه کلی اسفاده از اين عنصر به صورت زير است :

Syntax documnet.getElementByTagName ( " تگ سازنده عنصر يا عناصر مورد نظر " ) ;

مثال : برای مثال شما می خواهيد به کليه عناصر از جنس پاراگراف در يک صفحه که به وسيله تگ < p > ساخته می شوند ، دسترسی داشته باشيد . برای اين منظور از قطعه کد زير بايد استفاده کنيد :

Example
document.getElementByTagName( "p" ) ; کد

هانطور که گفتيم ، متد getElementByTagName ، عناصری در داخل يک صفحه را ، که تگ سازنده آنها را در پرانتز مقابل اين متد تعيين کرده باشيد را به صورت آرايه ای از رشته ها بر می گرداند . بنابراين می توان با استفاده از يک انديس به هر يک از اعضای اين آرايه دسترسی پيدا کرد . به عبارت ديگر اگر ما به دنبال عناصر پاراگراف ( تگ p ) در درون يک صفحه باشيم و تعداد 5 پاراگراف در آن صفحه موجود باشد ، خروجی اين متد يک آرايه پنج عضوی از id پاراگراف بوده ، که آنها را به ترتيب ، شماره ( انديس ) گذاری کرده است . پس می توانيم از اين ليست از عناصر هانند آرايه استفاده نماييم .
برای اين منظور ابتدا بايد ليست عناصر را در يک متغير به روش زير ذخيره نماييم :

Syntax var نام يک متغير = getElementByTagName ( تگ سازنده عناصر مورد نظر ) ;

مثال : برای مثال ليست عناصر < p > را در يک آرايه به نام MyP ذخيره کرده ايم :

Example
var MyP= getElementByTagName ( " p " ) ; کد

بنابراين اکنون ما دارای يک آرايه از کليه عناصری که با تگ < p > در يک صفحه ساخته می شوند ، هستيم و می توانيم به هر يک از آنها به وسيله يک انديس دسترسی داشته باشيم . برای درک بهتر به مثال زير توجه نماييد :

مثال : فرض کنيد در يک صفحه HTML که دارای کد فرضی زير است ، دارای 3 پاراگراف ( ساخته شده با تگ < p > ) با id های خاص خود و به ترتيب برابر با Ex2 , Ex1 و Ex3 هستيم . حال می خواهيم در انتهای صفحه متن دومين پاراگراف از مجموع کليه پارگراف های صفحه را در خروجی مجددا چاپ نماييم .
برای اين منظور ابتدا ليست ( آرايه ) کليه پاراگراف ها را در يک متغير فرضی به نام MyP ذخيره کرده و سپس در دستور خروجی به دومين عضو اين آرايه که در واقع دومين پاراگراف موجود در آن صفحه است ، دسترسی پيدا کرده و متن درون آن را در خروجی چاپ می کنيم :

Example
<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 استفاده کرده ايم . اين خاصيت طول يا به عبارت ديگر تعداد اعضای متغير آرايه ای را شامل می شود .

Example
<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

خروجی


راجع این مطلب سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...         >>>>>  ورود به انجمن تخصصی


نطر خودتان درباره این صفحه را با ما در میان بگذارید و از ما حمایت کنید :

آیا مطالب این صفحه برای شما مناسب و مفید بود ه است :

نام :                 
آدرس Email :    
 
نظر شما :