آموزش HTML مدل DOM - بخش 2

به این مطلب رای دهید
(0 رای)

خواص parentNode , firstChild و lastChild :

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

توضيح خواص :

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

خاصيت firstChild : اين خاصيت به اولين فرزند يک تگ يا عنصر اشاره می کند .

خاصيت lastChild : اين خاصيت به آخرين فرزند يک تگ يا عنصر اشاره می کند .

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

Example

<table>
<tr>
<td>
Cell 1
</td>
<td>
Cell 2
</td>
<td>
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>
This is the firstChild .
</td>
<td>
Cell 2
</td>
<td>
And this is the lastChild .
</td>
</tr>
</table>

<script >
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 .


And this is the lastChild . This is the firstChild .

خروجی

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

Example

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

<script >
document.write ( MainTr.firstChild.innerText + "<br />" ) ;
document.write ( MainTr.lastChild.innerText ) ;
</script>

کد

This is the firstChild .

Cell 2

And this is the lastChild .


And this is the lastChild . This is the firstChild .

خروجی

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

Example

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

<script >
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 .

parentNode of the td objects is : Tr1

خروجی

 منبع+

خواندن 278 بار |
شبکه های اجتماعی
مطالب بیشتری که در این بخش خواهید یافت: جاوا اسکریپت چیست؟ »
برگشت به شروع صفحه