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

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

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

Free-Learn

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

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

اگه زبان CSS رو دنبال کرده باشید خب میدونید که ما روش های مختلفی داریم برای انتخاب عناصر از صفحه، که به این روش ها میگیم انتخابگرها ( Selectors ) حال از همین انتخابگرها ما میتونیم در این متد استفاده نماییم.

یعنی مثلا من میخوام فلان تگ با کلاس test رو انتخاب کنم، خب ما تو CSS چجوری اینکارو میکنیم؟! خب بله در CSS به اینصورت مینویسیم :

حال به همین صورت هم میتونیم در متد querySelector استفاده نماییم و عناصر رو از صفحه انتخاب نماییم.

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

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

Free-Learn

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

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

مثال شماره ۱ : انتخاب تگ H2 که دارای کلاس ( Class ) test می باشد.

امتحان کنید

مثال شماره ۲ : انتخاب تگ P که دارای آی دی ( شناسه یا ID ) test می باشد.

امتحان کنید

مثال شماره ۳ : انتخاب تگ P که دارای کلاس ( Class ) test می باشد و دوباره همین تگ P خودش درون تگ DIV قرار داره.

امتحان کنید

مثال شماره ۴ : چندین کلاس با نام یکسان داریم، ولی خب گفتیم این متد، فقط اولین رو برمیگردونه.

امتحان کنید

مثال شماره ۵ : استفاده از انتخابگر صفت ( میخوایم عکسی که مقدار صفت alt آن برابر است با ” free-learn ” انتخاب نماییم )

امتحان کنید

Free-Learn

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

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

نام متد Chrome Firefox Opera Safari IE
()querySelector بله بله بله بله بله

Free-Learn

شکل نوشتاری

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

Free-Learn

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

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

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

Free-Learn

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

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

Free-Learn

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