این آموزش در تاریخ ۱۴۰۱/۰۴/۳۰ آپدیت شده است.
آموزش متد querySelector در DOM جاوااسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش متد querySelector در DOM جاوااسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
متد querySelector در DOM جاوااسکریپت
با استفاده از متد ()querySelector میتونیم به تگ های موجود در صفحه دسترسی پیدا نماییم، در واقع همانند یک انتخابگر عمل میکند و میشه به راحتی تگ ها، کلاس ها ، آی دی ها ، صفت ها و.. رو از صفحه انتخاب کرد.
متد querySelector فقط یه تگ میتونه انتخاب کنه ( یعنی اگه ۳تا کلاس test باشه، فقط اولیش رو انتخاب میکنه ) ولی متد querySelectorAll میتونه بیش از ۱تگ انتخاب کنه.
اگه زبان CSS رو دنبال کرده باشید خب میدونید که ما روش های مختلفی داریم برای انتخاب تگ ها از صفحه، که به این روش ها میگیم انتخابگرها ( Selectors ) حال از همین انتخابگرها ما میتونیم در این متد استفاده نماییم.
| مقدار برگشتی | انتخاب تگ های داخل صفحه از طریق انتخابگرهای CSS |
|---|---|
| نسخه DOM | DOM Level 1 |
Free-Learn
مثال از این متد
در ادامه میتوانید یک مثال از این متد را در زبان جاوا اسکریپت مشاهده نمایید.
مثال شماره ۱ : انتخاب تگ H2 که دارای کلاس free-learn می باشد ( در مثال زیر ۲تا کلاس free-learn وجود داره ولی خب گفتیم این متد اولین تگ رو انتخاب میکنه )
|
1 2 3 4 5 6 7 |
<script> var MyTag; MyTag = document.querySelector("h2.free-learn"); MyTag.style.color = "blue"; </script> |
مثال شماره ۲ : انتخاب تگی که دارای آی دی free-learn می باشد
|
1 2 3 4 5 6 7 |
<script> var MyTag; MyTag = document.querySelector("#free-learn"); MyTag.style.color = "blue"; </script> |
مثال شماره ۳ : انتخاب H2 که دارای کلاس free-learn می باشد و دوباره همین تگ H2 خودش درون تگ DIV قرار داره.
|
1 2 3 4 5 6 7 |
<script> var MyTag; MyTag = document.querySelector("div h2.free-learn"); MyTag.style.color = "blue"; </script> |
مثال شماره ۴ : استفاده از انتخابگر صفت ( میخوایم عکسی که مقدار صفت alt آن برابر است با ” free-learn ” انتخاب نماییم )
|
1 2 3 4 5 6 7 |
<script> var MyTag; MyTag = document.querySelector("img[alt='free-learn']"); MyTag.style.border = "3px solid red"; </script> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از این متد در جاوااسکریپت پشتیبانی میکنند یا خیر.
| نام متد | Chrome | Firefox | Opera | Safari | Edge |
| ()querySelector | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این متد در جاوااسکریپت بصورت زیر می باشد.
|
1 |
document.querySelector( CSS_Selectors ); |
Free-Learn
جدول پارامترها
در جدول زیر میتوانید، پارامترهایی را که میتوان در این متد استفاده کرد مشاهده نمایید.
| مقدار | توضیح |
|---|---|
| CSS_Selectors | ضروری – انتخابگرهای CSS که میخوایم باهاش تگ ها رو از صفحه انتخاب کنیم انتخابگر تگ ، کلاس ، آی دی ، صفت و.. ( لیست کامل انتخابگرها ) |
Free-Learn
نکات و توضیحات
- این متد فقط میتونه یک انتخابگر رو از صفحه برای ما انتخاب کنه، ( یعنی اگه ۱۰تا کلاس یا آی دی یا دیگر انتخابگرها ، رو داشتیم اون فقط اولی رو برامون میگیره )
- اگه خواستید انتخاب از بین تمامی عناصر موجود در صفحه باشه باید از متد ()querySelectorAll استفاده نمایید.
