این آموزش در تاریخ ۱۴۰۱/۰۵/۰۵ آپدیت شده است.
آموزش متد closest در DOM جاوااسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش متد closest در DOM جاوااسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
متد closest در DOM جاوااسکریپت
با استفاده از متد ()closest میتونیم نزدیک ترین تگ والد ( پدر ) را به یک تگ خاص که با استفاده از انتخابگرهای CSS مشخص میشود، جستجو بزنیم.
در واقع مثه یجور جستجو زدن هست برای پیدا کردن / انتخاب کردن نزدیکترین تگی که به تگ مورد نظر ما باشد، مثلا میگیم نزدیکترین تگی که دارای کلاس test هستش رو انتخاب کن.
جستجو از خوده تگ مورد نظر شروع میشه و به سمت بالا ( ابتدای صفحه وب ) ادامه پیدا میکنه، اگه چیزی پیدا کرد در خروجی نشونش میده و اگه چیزی پیدا نکرد در خروجی null یا هیچی برگشت داده میشه.
| مقدار برگشتی | برگشت نزدیک ترین تگ والد از یک تگ خاص که با استفاده از انتخابگرهای CSS مشخص شده باشد |
|---|
Free-Learn
مثال از این متد
در ادامه میتوانید یک مثال از این متد را در زبان جاوا اسکریپت مشاهده نمایید.
مثال شماره ۱ : در مثال زیر میخوایم از تگ P که دارای آی دی MyTag می باشد جستجو بزنیم و اون تگی که کلاس MyBox-1 داره رو انتخاب کنیم.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script> function Find(){ var MyTag , MyFind; MyTag = document.getElementById("MyTag"); MyFind = MyTag.closest(".MyBox-1"); if (MyFind) { MyFind.style.backgroundColor = "red"; } } </script> |
مثال شماره ۲ : استفاده از چندین انتخابگر بصورت همزمان ( باید بین هریک از انتخابگرها کاما یا , گذاشت )
|
1 |
MyFind = MyTag.closest(".MyBox-1 , .MyBox-2 , #Test"); |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از این متد در جاوااسکریپت پشتیبانی میکنند یا خیر.
| نام متد | Chrome | Firefox | Opera | Safari | Edge |
| ()closest | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این متد در جاوااسکریپت بصورت زیر می باشد.
|
1 |
Element.closest( " CSS_Selector_1 , CSS_Selector_2 , ... " ); |
- Selectors : انتخابگرهای زبان سی اس اس
Free-Learn
جدول پارامترها
در جدول زیر میتوانید، پارامترهایی را که میتوان در این متد استفاده کرد مشاهده نمایید.
| مقدار | توضیح |
|---|---|
| CSS_Selectors | ضروری – یک یا چندین انتخابگر CSS که میخوایم باهاش تگ مورد نظر رو جستجو بزنیم از حالت های مختلف انتخابگرها میشه استفاده کرد ( انتخابگر ID یا Class یا صفت و.. ) لیست کامل انتخابگرهای زبان CSS |
Free-Learn
نکات و توضیحات
- اگه بصورت همزمان از چندین انتخابگر استفاده نمایید ، دونه به دونه انتخابگرهارو چک میکنه و هرکدوم مطابقت داشت همونو اعمال میکنه. ( یعنی ممکنه انتخابگر اول مطابقت نداشته باشه، پس میره و بعدی هارو چک میکنه و هرکدوم مطابقت داشت همونو اعمال میکنه و اگه هم مطابقت نداشت خب هیچی دیگه )
