خانه آموزش زبان جاوااسکریپت آموزش DOM در جاوااسکریپت نحوه دسترسی به گره ها در جاوا اسکریپت

نحوه دسترسی به گره ها در جاوا اسکریپت

توسط

۱۳۹۹-۱۰-۰۳

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش نحوه دسترسی به گره ها در جاوا اسکریپت با من همراه باشید.

نحوه دسترسی به گره ها در جاوا اسکریپت

Free-Learn

آنچه در این جلسه میخوانید :

1 نحوه دسترسی به گره ها در جاوا اسکریپت
2 ویژگی parentNode
3 ویژگی firstChild
4 ویژگی lastChild
5 ویژگی childNodes
6 ویژگی nextElementSibling
7 ویژگی previousElementSibling

نحوه دسترسی به گره ها در جاوا اسکریپت

خب ما در جلسه قبلی با اینکه اصلا گره چیه و به چه چیزهایی در یک صفحه ی وب میگیم گره ، آشنا شدیم و پیشنهاد میکنم حتما جلسه قبلی رو از اینجا مشاهده نمایید.

خب ما در جلسه قبلی متوجه شدیم که ۳ شاخه اصلی از گره هارو در یک صفحه وب داریم :

Parent : یعنی عنصر والد یا پدر
Child : یعنی عنصر فرزند
Siblings : یعنی عنصر خواهر یا برادر

میخوایم در ادامه نحوه دسترسی به این گره هارو یاد بگیریم ، مثلا اینکه چجوری میتونیم گره پدر یا والد یک عنصر رو بدست آوریم یا مثلا ببینیم گره خواهر یا برادر یک عنصر چیه!؟

پس در ادامه قراره با ویژگی های زیر آشنا شیم :

parentNode : گره پدر یا والد رو برمیگردونه
firstChild : گره اولین فرزند از والد
lastChild : گره آخرین فرزند از والد
childNodes : گره همه ی فرزندان از والد
nextElementSibling : خواهر یا برادر بعدی
previousElementSibling : خواهر یا برادر قبلی

Free-Learn

ویژگی parentNode

خب اسمش parentNode روشه دیگه، گره پدر یا والد ، ما با استفاده از این ویژگی میتونیم گره والد یا پدر یک عنصر رو بدست آوریم.

توجه داشته باشید که گره document نمیتونه گره والد یا پدر داشته باشه چون خودش والد تمامی عناصر موجود در صفحه می باشد.

مثال شماره ۱ : مثلا میخوایم ببینیم عنصر پدر یا والد تگ P که در مثال زیر می باشد، چیه؟!

<script>

 var a = document.querySelector("#test");
 var result = document.getElementById("Result");
 result.innerHTML = a.parentNode;

</script>

var a = document.querySelector("#test");

var result = document.getElementById("Result");

result.innerHTML = a.parentNode;

</script>

امتحان کنید

توضیح مثال بالا :

با اجرای مثال بالا، باید در خروجی [object HTMLDivElement] چاپ شود و بله درسته ، عنصر والد یا پدر تگ P میشه div که در خروجی به اینصورت نشونش میده.

مثال شماره ۲ : بدست آوردن گره UL

<script>

 var a = document.querySelector("#test");
 var result = document.getElementById("Result");
 result.innerHTML = a.parentNode;

</script>

var a = document.querySelector("#test");

var result = document.getElementById("Result");

result.innerHTML = a.parentNode;

</script>

امتحان کنید

خروجی مثال بالا :

[object HTMLUListElement]

Free-Learn

ویژگی firstChild

خب دوستان در ادامه ی آموزش نحوه دسترسی به گره ها در جاوا اسکریپت میخوایم با استفاده از ویژگی firstChild اولین گره فرزند از یک عنصر والد رو بدست آوریم.

اگه بخوایم همینجوری مستقیم همانند مثال قبلی خروجی رو به نمایش درآورم، خروجی قابل درک نیست ، در نتیجه مجبورم خروجی رو در پنجره کنسول به نمایش درآورم که قابل درک باشه براتون ، پس حواستون باشه از مثال پایین به بعد تا پایان این آموزش، خروجی مثال هارو در پنجره کنسول مشاهده نمایید.

مثال شماره ۱ : بدست آوردن فرزند اول از عنصر والد

<script>

 var a = document.querySelector("#test");
 console.log( a.firstChild);

</script>

var a = document.querySelector("#test");

console.log( a.firstChild);

</script>

امتحان کنید

خروجی مثال بالا در پنجره کنسول : پس اولین فرزند از عنصر والد میشه تگ P که دارای کلاس test1 می باشد.

Free-Learn

ویژگی lastChild

اینم خب از اسمش lastChild مشخصه ، برای بدست آوردن آخرین فرزند از عنصر والد یا پدر.

مثال شماره ۱ : بدست آوردن فرزند آخر از عنصر والد

<script>

 var a = document.querySelector("#test");
 console.log( a.lastChild);

</script>

var a = document.querySelector("#test");

console.log( a.lastChild);

</script>

امتحان کنید

خروجی مثال بالا در پنجره کنسول : پس آخرین فرزند از عنصر والد میشه تگ P که دارای کلاس test3 می باشد.

Free-Learn

ویژگی childNodes

با استفاده از این ویژگی childNodes میتونیم هم لیست تمامی فرزندان یک عنصر والد رو بدست آوریم و هم اگه خواستیم فرزند خاصی رو با استفاده از شماره ایندکسش بدست آوریم.

شماره ایندکس یا Index همیشه از ۰ شروع میشه .

مثال شماره ۱ : بدست آوردن فرزند خاص ( باید شماره ایندکس یا Index فرزند رو بهش بدیم ) مثلا میخوایم فرزند دوم رو بدست آوریم، خب گفتیم شماره ایندکس از ۰ شروع میشه، پس شماره ایندکس فرزند دوم میشه ۱ و فرزند سوم میشه ۲ و همینجور تا … زمانی که فرزند باشه.

<script>

 var a = document.querySelector("#test");
 console.log( a.childNodes[1]);

</script>

var a = document.querySelector("#test");

console.log( a.childNodes[1]);

</script>

امتحان کنید

مثال شماره ۲ : بدست آوردن لیست کامل فرزندان

<script>

 var a = document.querySelector("#test");
 console.log( a.childNodes );

</script>

var a = document.querySelector("#test");

console.log( a.childNodes );

</script>

امتحان کنید

Free-Learn

ویژگی nextElementSibling

با استفاده از ویژگی nextElementSibling میتونیم عنصر خواهر یا برادر بعدی یک گره رو بدست آوریم.

مثال شماره ۱ : در مثال زیر میخوایم عنصر بعد از عنصری که کلاس test1 را دارد پیدا نماییم. ( به اصطلاح میگن خواهر یا برادر بعد از عنصر )

<script>

 var a = document.querySelector(".test1");
 console.log( a.nextElementSibling );

</script>

var a = document.querySelector(".test1");

console.log( a.nextElementSibling );

</script>

امتحان کنید

خروجی مثال بالا در پنجره کنسول :

مثال شماره ۲ : پیدا کردن عنصر بعد از عنصر والد

<script>

 var a = document.querySelector("#test");
 console.log( a.nextElementSibling );

</script>

var a = document.querySelector("#test");

console.log( a.nextElementSibling );

</script>

امتحان کنید

خروجی مثال بالا در پنجره کنسول :

Free-Learn

ویژگی previousElementSibling

ویژگی قبلی خب میومد و گره بعد از عنصر رو پیدا میکرد حال این ویژگی previousElementSibling گره قبل از عنصر رو پیدا میکنه.

مثال شماره ۱ :

<script>

 var a = document.querySelector("#test");
 console.log( a.previousElementSibling );

</script>

var a = document.querySelector("#test");

console.log( a.previousElementSibling );

</script>

امتحان کنید

خروجی مثال بالا در پنجره کنسول :

<hr>

Free-Learn

فروشگاه فری لرن

دریافت PDF یا پرینت این مطلب