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

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

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

Free-Learn

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

اگه در جلسه قبلی آموزش متد ()querySelector رو مشاهده کرده باشید میدونید که متد querySelector و querySelectorAll یکی هستند و عملا هر دو برای انتخاب عناصر از صفحه مورد استفاده قرار میگیرند.

حال در جلسه قبلی هم خوندیم که متد querySelector از بین تمامی عناصر موجود در صفحه فقط اولین عنصر رو برمیگردونه، یعنی اگه مثلا ۱۰تا کلاس تست داشتیم، اون اولین کلاس رو انتخاب میکنه و بقیه رو کاری نداره، حال اگه بخوایم انتخاب رو از بین تمامی عناصر انجام بدیم باید از متد querySelectorAll استفاده نماییم.

فقط دیگه حواستون باشه وقتی عنصری رو انتخاب میکنید، حتما شماره ایندکس ( یا Index ) یا شماره جایگاه اون عنصر در صفحه رو هم باید مشخص نمایید. ( شماره ایندکس هم دیگه باید بدونید همیشه از ۰ شروع میشه )

پیشنهاد میکنم حتما آموزش متد ()querySelector رو مشاهده نمایید.

مقدار برگشتی برگشت اون گره ای که توسط انتخابگرهای CSS انتخاب شده
نسخه DOM Selectors Level 1 Document Object

Free-Learn

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

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

مثال شماره ۱ : انتخاب دومین تگ H2 که دارای کلاس test می باشد. ( شماره ایندکس بهش دادیم ۱ ، این یعنی دومین تگ H2 رو انتخاب میکنه، چون گفتیم شماره ایندکس از ۰ شروع میشه، پس ۰ میشه اولی و ۱ میشه دومی )

امتحان کنید

مثال شماره ۲ : انتخاب تمامی تگ های h2 از صفحه که دارای کلاس test می باشند. ( به کمک حلقه For )

امتحان کنید

مثال شماره ۳ : انتخاب دسته جمعی عناصر ( باید بین هریک از عناصر کاما یا , گذاشت )

امتحان کنید

Free-Learn

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

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

نام متد Chrome Firefox Opera Safari IE
()querySelectorAll ۴٫۰ ۳٫۵ ۱۰٫۰ ۳٫۲ ۹٫۰

Free-Learn

شکل نوشتاری

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

  • Index_Number : شماره ایندکس یا جایگاه عنصر

Free-Learn

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

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

مقدار توضیح
CSS_Selectors ضروری – اون انتخابگری که میخوایم باهاش عناصر رو از صفحه انتخاب نماییم.
انتخابگر تگ ، کلاس ، آی دی ، صفت و..
( لیست کامل انتخابگرها )

Free-Learn

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

  • اگه شماره ایندکسی که وارد میشود خارج از محدوده باشد یا کلا وجود نداشته باشد خروجی هیچ یا null میشه.
  • در مرورگر IE ( اینترنت اکسپلورر ) نسخه ۸ از انتخابگرهای CSS3 پشتیبانی نمیکند، ولی IE نسخه ۹ مشکلی نداره و پشتیبانی میکند.

Free-Learn

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