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


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

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

همانطور که در بخش قبل اشاره شد ، شما به وسيله مدل DOM می توانيد به هر عنصری در يک صفحه HTML که می خواهيد آن را تغيير داده و يا اطلاعاتی درباره آن کسب نماييد ، دسترسی داشته باشيد .
در ادامه 2 روش کلی زير را برای دسترسی به عناصر مختلف در يک صفحه HTML را مورد بررسی قرار می دهيم :

  1. با استفاده از متدهای ( ) getElementById و ( ) getElementByTagName .
  2. با استفاده از خواص parentNode , firstNode و lastChild يک گره .

متد های ( ) getElementById و ( ) getElementByTagName :

متدهای ( ) getElementById و ( ) getElementByTagName می توانند به هر عنصری در يک صفحه HTML دسترسی داشته باشند . اين متدها کاری به ساختار و چيدمان صفحه ندارند و مهم نيست که عنصر مورد نظر در کجای صفحه قرار گرفته باشد . اين در متد آنها را پيدا خواهند کرد :

1 ) متد ( ) getElementById :

نحوه دسترسی اين متد به عناصر بر اساس خاصيت id آن عصر در HTML می باشد . اين متد دقيقا عنصری که id آن را در پرانتز مقابل اين متد تعيين کرده باشيد ، را بر می گرداند . بنابراين خروجی اين متد يک عنصر منحصر به فرد با id تعيين شده خواهد بود .
توجه : اين متد يکی از متدهای شی document است .

نکته مهم : همانطو که در بخش آموزش HTML آموختيد ، هر عنصر ( تگ ) در يک صفحه ، می تواند دارای يک شناسه يا id منحصر به فرد و غير تکراری باشد . به عبارت ديگر هيچ دو عنصری در يک صفحه HTML ، نمی توانند دارای id يکسان باشند . از اين id برای شناسايي و دسترسی به عنصر مورد نظر در صفحه استفاده می شود .

Syntax documnet.getElementById ( " عنصر مورد نظر id " ) ;

مثال : برای مثال فرض کنيد که شما در يک صفحه 3 پاراگراف ( تگ p ) با id های P1 ، P2 و P3 داريد  . حال می خواهيد که متن درون يکی از پاراگراف ها که id  آن برابر P1 است ، را در جای ديگری نمايش دهيد . برای اين منظور از متد getElementById  استفاده کرده و به وسيله id پاراگراف مورد نظر ابتدا به آن عنصر دسترسی پيدا کرده و سپس  متن درون آن را توسط خاصيت InnerText ، آنگونه که در کد مثال زير نمايش داده شده است ، بر روی صفحه نمايش دهيد :

توجه : در ادامه با خواص بيشتری از عناصر مختلف در مدل DOM آشنا خواهيد شد .
Example
<html>
  <head>
    <title>Title of the Page</title>
  </head>
  <body>
    <p id="P1">
      www.DevelopperStudio.ir
    </p>

    <p id="P2">
      An Investigation for Developement
    </p>

    <p id="P3">
      HTML , CSS , SQL , Java Script and more ... free tutorial
    </p>


    <script type="text/javascript">
      document.write ( document.getElementById( "P1").innerText )
    </script>

  </body>
</html>
کد

www.DevelopperStudio.ir

An Investigation for Developement

HTML , CSS , SQL , Java Script and more ... free tutorial

خروجی

نکته : همانطور که در قسمت قبل گفتيم ، عنصر ( گره ) مادر يک عنصر ديگر ، عنصری است که در رده سلسلمه مراتبی يک رده بالاتر از عنصر مذکور بوده و در واقع آن را در برگرفته است .در مدل DOM می توان به عنصر يک مادر ديگر دسترسی داشت و آن را نمايش داد . برای اين منظور به مثال زير دقت کنيد :
مثال 2 :در مثال زير يک عنصر پاراگراف ( تگ p ) و يک ليست ترتيبی ايجاد کرده ايم ، که در درون ليست چندين آيتم ( تگ li ) قرار گرفته است . در اين مثال با استفاده از متد getElementById ابتدا به دو عنصر Pex و li_1دسترسی پيدا کرده و سپس توسط خاصيت parenElement عنصر مادر آنها را در خروجی نمايش داده ايم :

Example
<html>
  <head>
    <title>Title of the Page</title>
  </head>
  <body id ="BODY">
    <p id="Pex">
      www.DevelopperStudio.ir
    </p>

    <ol id="List">
      <li id="li_1">HTML</li>
      <li id="li_2">CSS</li>
      <li id="li_3">SQL</li>
    </ol>

    <script type="text/javascript">
      document.write ( document.getElementById( "Pex" ).parentElement.id );
      document.write ( document.getElementById( "li_1" ).parentElement.id );
    </script>

  </body>
</html>
کد

www.DevelopperStudio.ir

  1. HTML
  2. CSS
  3. SQL
خروجی


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


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

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

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