خريد CD های آموزشی

آموزش کامل Java Script
آموزش کامل Java Script

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

خواص parentNode , firstChild و lastChild :

به وسيله خواص parentNode , firstChild و lastChild می توان به طور محدود به برخی از عناصر در يک صفحه HTML دسترسی داشت . اين خواص ساختار صفحه را دنبال کرده و بر حسب رده سلسله مراتب عناصر ، به آنها دسترسی پيدا می کنند . در ادامه ابتدا به توضيح اين خواص پرداخته و سپس سعی می کنيم تا با ارائه مثال هايي کاربرد آنها را در عمل نشان دهيم :

توضيح خواص :

  • خاصيت parentNode : اين خاصيت به تگ مادر يک عنصر اشاره می کند . تگ مادر تگی است که عنصر مورد نظر را در بر گرفته است و در رده سلسله مراتب ، يک رده بالاتر از عنصر فرزند خود است .
  • خاصيت firstChild : اين خاصيت به اولين فرزند يک تگ يا عنصر اشاره می کند .
  • خاصيت lastChild : اين خاصيت به آخرين فرزند يک تگ يا عنصر اشاره می کند .

مثا ل: برای درک بهتر مفاهيم فوق به مثال زير و توضيحات آن دقت کنيد :

Example
<table>
  <tr>
    <td id="Td1">
      Cell 1
    </td>
    <td id="Td2">
      Cell 2
    </td>
    <td id="Td3">
      Cell 3
    </td>
  </tr>
</table>

توضيح مثال فوق : در مثال فوق تگ < tr > ، عنصر parentNode يا مادر 3 عنصر < td > و تگ < table > نيز عنصر parentNode تگ < tr > است .
همچنين تگ < td > با id = Td1 ، اولين فرزند يا firstChild تگ < tr > و تگ < td > با id = Td3 آخرين فرزند يا lastChild تگ < tr > است .
در مثال های زير سعی کرده ام تا برخی از کاربردهای اين 3 خاصيت را در عمل نشان دهم :

مثال 1 : در مثال زير يک جدول فرضی را با يک سطر ( تگ < tr > ) و 3 خانه ( تگ < td > ) ايجاد کرده ايم . سپس به وسيله 2 خاصيت firstChild و lastChild به محتوای اولين و آخرين خانه اين جدول دسترسی پيدا کرده و متن درون آنها را به وسيله خاصيت innerText بر روی صفحه نمايش داده ايم :

Example
<table border ="1">
  <tr id="MainTr">
    <td id="Td1">
      This is the firstChild .
    </td>
    <td id="Td2">
      Cell 2
    </td>
    <td id="Td3">
      And this is the lastChild .
    </td>
  </tr>
</table>

<script type="text/javascript">
  document.write ( document.getElementById("MainTr").firstChild.innerText + "<br />" ) ;
  document.write ( document.getElementById("MainTr").lastChild.innerText ) ;
</script> 		کد
This is the firstChild . Cell 2 And this is the lastChild .
خروجی

نکته : در مثال شماره 1 ما با استفاده از متد getElementById به تگ < tr > دسترسی پيدا کرديم ، اما می توان به صورت مستقيم و بدون استفاده از متد getElementById به عنصر مورد نظر خود نيز اشاره کرد . مثال شماره 1 را به اين صورت بازنويسی کرده ايم ، به آن دقت کنيد :

Example
<table border ="1">
  <tr id="MainTr">
    <td id="Td1">
      This is the firstChild .
    </td>
    <td id="Td2">
      Cell 2
    </td>
    <td id="Td3">
      And this is the lastChild .
    </td>
  </tr>
</table>

<script type="text/javascript">
  document.write ( MainTr.firstChild.innerText + "<br />" ) ;
  document.write ( MainTr.lastChild.innerText ) ;
</script> 		کد
This is the firstChild . Cell 2 And this is the lastChild .
خروجی

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

Example
<table border ="1">
  <tr id="Tr1">
    <td id="Td_1">
      This is the firstChild .
    </td>
    <td id="Td_2">
      Cell 2
    </td>
    <td id="Td_3">
      And this is the lastChild .
    </td>
  </tr>
</table>

<script type="text/javascript">
  document.write ( "parentNode of the td objects is : " + document.getElementById("Tr1").parenNode.id ) ;
</script> 		کد
This is the firstChild . Cell 2 And this is the lastChild .
خروجی