نحوه دسترسی به گره ها در جاوا اسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش نحوه دسترسی به گره ها در جاوا اسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
نحوه دسترسی به گره ها در جاوا اسکریپت
خب ما در جلسه قبلی با اینکه اصلا گره چیه و به چه چیزهایی در یک صفحه ی وب میگیم گره ، آشنا شدیم و پیشنهاد میکنم حتما جلسه قبلی رو از اینجا مشاهده نمایید.
خب ما در جلسه قبلی متوجه شدیم که ۳ شاخه اصلی از گره هارو در یک صفحه وب داریم :
- Parent : یعنی عنصر والد یا پدر
- Child : یعنی عنصر فرزند
- Siblings : یعنی عنصر خواهر یا برادر
میخوایم در ادامه نحوه دسترسی به این گره هارو یاد بگیریم ، مثلا اینکه چجوری میتونیم گره پدر یا والد یک عنصر رو بدست آوریم یا مثلا ببینیم گره خواهر یا برادر یک عنصر چیه!؟
پس در ادامه قراره با ویژگی های زیر آشنا شیم :
- parentNode : گره پدر یا والد رو برمیگردونه
- firstChild : گره اولین فرزند از والد
- lastChild : گره آخرین فرزند از والد
- childNodes : گره همه ی فرزندان از والد
- nextElementSibling : خواهر یا برادر بعدی
- previousElementSibling : خواهر یا برادر قبلی
Free-Learn
ویژگی parentNode
خب اسمش parentNode
روشه دیگه، گره پدر یا والد ، ما با استفاده از این ویژگی میتونیم گره والد یا پدر یک عنصر رو بدست آوریم.
مثال شماره ۱ : مثلا میخوایم ببینیم عنصر پدر یا والد تگ P که در مثال زیر می باشد، چیه؟!
1 2 3 4 5 6 7 |
<script> var a = document.querySelector("#test"); var result = document.getElementById("Result"); result.innerHTML = a.parentNode; </script> |
مثال شماره ۲ : بدست آوردن گره UL
1 2 3 4 5 6 7 |
<script> var a = document.querySelector("#test"); var result = document.getElementById("Result"); result.innerHTML = a.parentNode; </script> |
Free-Learn
ویژگی firstChild
خب دوستان در ادامه ی آموزش نحوه دسترسی به گره ها در جاوا اسکریپت میخوایم با استفاده از ویژگی firstChild
اولین گره فرزند از یک عنصر والد رو بدست آوریم.
مثال شماره ۱ : بدست آوردن فرزند اول از عنصر والد
1 2 3 4 5 6 |
<script> var a = document.querySelector("#test"); console.log( a.firstChild); </script> |
Free-Learn
ویژگی lastChild
اینم خب از اسمش lastChild
مشخصه ، برای بدست آوردن آخرین فرزند از عنصر والد یا پدر.
مثال شماره ۱ : بدست آوردن فرزند آخر از عنصر والد
1 2 3 4 5 6 |
<script> var a = document.querySelector("#test"); console.log( a.lastChild); </script> |
Free-Learn
ویژگی childNodes
با استفاده از این ویژگی childNodes
میتونیم هم لیست تمامی فرزندان یک عنصر والد رو بدست آوریم و هم اگه خواستیم فرزند خاصی رو با استفاده از شماره ایندکسش بدست آوریم.
مثال شماره ۱ : بدست آوردن فرزند خاص ( باید شماره ایندکس یا Index فرزند رو بهش بدیم ) مثلا میخوایم فرزند دوم رو بدست آوریم، خب گفتیم شماره ایندکس از ۰ شروع میشه، پس شماره ایندکس فرزند دوم میشه ۱ و فرزند سوم میشه ۲ و همینجور تا … زمانی که فرزند باشه.
1 2 3 4 5 6 |
<script> var a = document.querySelector("#test"); console.log( a.childNodes[1]); </script> |
مثال شماره ۲ : بدست آوردن لیست کامل فرزندان
1 2 3 4 5 6 |
<script> var a = document.querySelector("#test"); console.log( a.childNodes ); </script> |
Free-Learn
ویژگی nextElementSibling
با استفاده از ویژگی nextElementSibling
میتونیم عنصر خواهر یا برادر بعدی یک گره رو بدست آوریم.
مثال شماره ۱ : در مثال زیر میخوایم عنصر بعد از عنصری که کلاس test1 را دارد پیدا نماییم. ( به اصطلاح میگن خواهر یا برادر بعد از عنصر )
1 2 3 4 5 6 |
<script> var a = document.querySelector(".test1"); console.log( a.nextElementSibling ); </script> |
مثال شماره ۲ : پیدا کردن عنصر بعد از عنصر والد
1 2 3 4 5 6 |
<script> var a = document.querySelector("#test"); console.log( a.nextElementSibling ); </script> |
Free-Learn
ویژگی previousElementSibling
ویژگی قبلی خب میومد و گره بعد از عنصر رو پیدا میکرد حال این ویژگی previousElementSibling
گره قبل از عنصر رو پیدا میکنه.
مثال شماره ۱ :
1 2 3 4 5 6 |
<script> var a = document.querySelector("#test"); console.log( a.previousElementSibling ); </script> |