آموزش متد closest در DOM جاوااسکریپت

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

متد closest در DOM جاوااسکریپت

Free-Learn

متد closest در DOM جاوااسکریپت

با استفاده از متد ()closest میتونیم نزدیک ترین عنصر ( یا تگ ) والد ( پدر یا پدربزرگ یا جد ) را به یک عنصر خاص که با استفاده از انتخابگرهای CSS مشخص میشود، جستجو بزنیم، در واقع یه جور جستجو زدن هست برای پیدا کردن نزدیکترین تگی که به تگ مورد نظر ما باشد.

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

مقدار برگشتی برگشت نزدیک ترین عنصر والد از یک عنصر خاص
که با استفاده از انتخابگرهای CSS مشخص شده باشد

Free-Learn

مثال از این متد

در ادامه میتوانید یک مثال از این متد را در زبان جاوا اسکریپت مشاهده نمایید.

مثال شماره ۱ : در مثال زیر میخوایم از تگ P که دارای آی دی myElement می باشد به سمت بالا ( ریشه صفحه ) جستجو بزنیم و اون تگی که کلاس P2 داره رو پیدا نماییم.

امتحان کنید

مثال شماره ۲ : استفاده از چندین انتخابگر بصورت همزمان ( باید بین هریک از انتخابگرها کاما یا , گذاشت )

امتحان کنید

Free-Learn

پشتیبانی مرورگرها

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

نام متد Chrome Firefox Opera Safari IE
()closest ۴۱ ۳۵ ۲۸ ۶ خیر

Free-Learn

شکل نوشتاری

نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این متد در جاوااسکریپت بصورت زیر می باشد.

  • Selectors : انتخابگرهای زبان سی اس اس

Free-Learn

جدول پارامترها

در جدول زیر میتوانید، پارامترهایی را که میتوان در این متد استفاده کرد مشاهده نمایید.

مقدار توضیح
Selectors ضروری – یک یا چندین انتخابگر CSS که میخوایم باهاش عنصر مورد نظر رو جستجو بزنیم.
از حالت های مختلف انتخابگرها میشه استفاده کرد ( انتخابگر ID یا Class یا صفت و.. )
لیست کامل انتخابگرهای زبان CSS
برای استفاده از چندین انتخابگر، باید بینشون کاما ( , ) گذاشت.

Free-Learn

نکات و توضیحات

  • اگه بصورت همزمان از چندین انتخابگر استفاده نمایید ( همانند مثال شماره ۲ ) ، دونه به دونه انتخابگرهارو چک میکنه و هرکدوم مطابقت داشت همونو اعمال میکنه. ( یعنی ممکنه انتخابگر اول مطابقت نداشته باشه، پس میره و بعدی هارو چک میکنه و هرکدوم مطابقت داشت همونو اعمال میکنه )
  • این متد در مرورگر اینترنت اکسپلورر یا IE پشتیبانی نمیشود ولی در مرورگر Edge از نسخه ۱۵ به بالا پشتیبانی میشود.

Free-Learn

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