آموزش متد 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 رو انتخاب میکنه، چون گفتیم شماره ایندکس از ۰ شروع میشه، پس ۰ میشه اولی و ۱ میشه دومی )
|
1 2 3 4 5 6 7 |
<script> var MyTag; MyTag = document.querySelectorAll("h2.test")[1]; MyTag.style.color = "blue"; </script> |
مثال شماره ۲ : انتخاب تمامی تگ های h2 از صفحه که دارای کلاس test می باشند. ( به کمک حلقه For )
|
1 2 3 4 5 6 7 8 9 |
<script> var MyTag , i; MyTag = document.querySelectorAll("h2.test"); for( i=0 ; i < MyTag.length ; i++ ){ MyTag[i].style.color = "blue"; } </script> |
مثال شماره ۳ : انتخاب دسته جمعی عناصر ( باید بین هریک از عناصر کاما یا , گذاشت )
|
1 2 3 4 5 6 7 8 9 |
<script> var MyTag , i; MyTag = document.querySelectorAll(".test1 , .test3"); for( i=0 ; i < MyTag.length ; i++ ){ MyTag[i].style.color = "blue"; } </script> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از این متد در جاوااسکریپت پشتیبانی میکنند یا خیر.
| نام متد | Chrome | Firefox | Opera | Safari | IE |
| ()querySelectorAll | ۴٫۰ | ۳٫۵ | ۱۰٫۰ | ۳٫۲ | ۹٫۰ |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این متد در جاوااسکریپت بصورت زیر می باشد.
|
1 |
document.querySelectorAll( CSS_Selectors )[ Index_Number ]; |
- Index_Number : شماره ایندکس یا جایگاه عنصر
Free-Learn
جدول پارامترها
در جدول زیر میتوانید، پارامترهایی را که میتوان در این متد استفاده کرد مشاهده نمایید.
| مقدار | توضیح |
|---|---|
| CSS_Selectors | ضروری – اون انتخابگری که میخوایم باهاش عناصر رو از صفحه انتخاب نماییم. انتخابگر تگ ، کلاس ، آی دی ، صفت و.. ( لیست کامل انتخابگرها ) |
Free-Learn
نکات و توضیحات
- اگه شماره ایندکسی که وارد میشود خارج از محدوده باشد یا کلا وجود نداشته باشد خروجی هیچ یا null میشه.
- در مرورگر IE ( اینترنت اکسپلورر ) نسخه ۸ از انتخابگرهای CSS3 پشتیبانی نمیکند، ولی IE نسخه ۹ مشکلی نداره و پشتیبانی میکند.
