این آموزش در تاریخ ۱۴۰۱/۰۴/۳۰ آپدیت شده است.
آموزش متد querySelectorAll در DOM جاوااسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش متد querySelectorAll در DOM جاوااسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
متد querySelectorAll در DOM جاوااسکریپت
اگه در جلسه قبلی آموزش متد ()querySelector رو مشاهده کرده باشید میدونید که متد querySelector و querySelectorAll یکی هستند و عملا هر دو برای انتخاب تگ ها از صفحه مورد استفاده قرار میگیرند.
ولی خب متد querySelector از بین تمامی تگ های موجود در صفحه فقط اولین تگ رو برمیگردونه، یعنی اگه مثلا ۱۰تا کلاس test داشتیم، اون اولین کلاس رو انتخاب میکنه و بقیه رو کاری نداره، حال اگه بخوایم انتخاب رو از بین تمامی عناصر انجام بدیم باید از متد querySelectorAll استفاده نماییم.
فقط دیگه حواستون باشه وقتی تگی رو انتخاب میکنید، حتما شماره ایندکس ( یا Index ) یا شماره جایگاه اون تگ در صفحه رو هم باید مشخص نمایید. ( شماره ایندکس هم دیگه باید بدونید همیشه از ۰ شروع میشه )
پیشنهاد میکنم حتما آموزش متد ()querySelector رو مشاهده نمایید.
| مقدار برگشتی | انتخاب تگ های داخل صفحه از طریق انتخابگرهای CSS |
|---|---|
| نسخه DOM | DOM Level 1 |
Free-Learn
مثال از این متد
در ادامه میتوانید یک مثال از این متد را در زبان جاوا اسکریپت مشاهده نمایید.
مثال شماره ۱ : خب ما ۳تا تگ H2 داریم که هر۳تاش هم کلاس free-learn دارند، ما میخوایم اولین تگ رو انتخاب میکنیم پس شماره ایندکس ۰ دادیم.
|
1 2 3 4 5 6 7 |
<script> var MyTag; MyTag = document.querySelectorAll(".free-learn")[0]; MyTag.style.color = "blue"; </script> |
مثال شماره ۲ : انتخاب تمامی تگ هایی که دارای کلاس free-learn می باشند. ( به کمک حلقه For )
|
1 2 3 4 5 6 7 8 9 |
<script> var MyTag , i; MyTag = document.querySelectorAll(".free-learn"); for( i=0 ; i < MyTag.length ; i++ ){ MyTag[i].style.color = "red"; } </script> |
مثال شماره ۳ : انتخاب دسته جمعی تگ ها ( باید بین هریک از تگ ها کاما یا , گذاشت )
|
1 2 3 4 5 6 7 8 9 |
<script> var MyTag , i; MyTag = document.querySelectorAll(".free , .learn"); for( i=0 ; i < MyTag.length ; i++ ){ MyTag[i].style.color = "blue"; } </script> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از این متد در جاوااسکریپت پشتیبانی میکنند یا خیر.
| نام متد | Chrome | Firefox | Opera | Safari | Edge |
| ()querySelectorAll | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این متد در جاوااسکریپت بصورت زیر می باشد.
|
1 |
document.querySelectorAll( CSS_Selectors )[ Index_Number ]; |
- CSS_Selectors : انتخابگرهای سی اس اس
- Index_Number : شماره ایندکس یا جایگاه تگ
Free-Learn
جدول پارامترها
در جدول زیر میتوانید، پارامترهایی را که میتوان در این متد استفاده کرد مشاهده نمایید.
| مقدار | توضیح |
|---|---|
| CSS_Selectors | ضروری – انتخابگرهای CSS که میخوایم باهاش تگ ها رو از صفحه انتخاب کنیم انتخابگر تگ ، کلاس ، آی دی ، صفت و.. ( لیست کامل انتخابگرها ) |
Free-Learn
نکات و توضیحات
- اگه شماره ایندکسی که وارد میشود خارج از محدوده باشد یا کلا وجود نداشته باشد خروجی هیچ یا null میشه.
