این آموزش در تاریخ ۱۴۰۱/۰۲/۲۲ آپدیت شده است.
آموزش انتخابگرها در جاوااسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش انتخابگرها در جاوااسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
آموزش انتخابگرها در جاوااسکریپت
خب بطور کلی ما برای اینکه بتونیم به یک تگ در صفحه دسترسی پیدا کنیم ( حالا مثلا بعدش بخوایم محتواشو تغییر بدیم یا مثلا حذفش کنیم و… ) باید اول بتونیم اون تگ رو انتخاب کنیم.
در زبان CSS هم دقیقا به همین شکل هستش، یعنی مثلا بخوایم به یک تگ استایل بدیم باید اول از طریق انتخابگرهای CSS اون تگ رو انتخاب کنیم بعدش بهش استایل میدیم.
حال در زبان جاوا اسکریپت هم دقیقا به همین صورت می باشد، یعنی برای اینکه بتونیم یک تگ رو از تو صفحه بگیریم باید بتونیم اول انتخابش کنیم بعدش حالا هرکاری دوس داشتیم روش انجام بدیم.
ما در زبان جاوا اسکریپت از چندین روش میتونیم عناصر رو از صفحه انتخاب کنیم که این روش ها به شرح زیر می باشد :
- انتخاب از طریق ID یا شناسه
- انتخاب از طریق کلاس یا Class
- انتخاب از طریق نام تگ ( نام خوده تگ )
- انتخاب از طریق صفت Name ( که از طریق صفت Name مشخص شده باشه )
- انتخاب از طریق متد querySelectorAll
- انتخاب از طریق متد querySelector
Free-Learn
انتخاب عناصر از طریق ID یا شناسه
خب ID یا شناسه رو که دیگه میدونیم چیه!؟ میدونیم که ID یک شناسه منحصر بفرد هست که با استفاده از صفت ID در زبان HTML ایجاد میشه ، اینکه میگیم منحصر بفرد یعنی اون ID باید در زبان جاوااسکریپت و درکل داخل اون صفحه فقط یک عدد باشه.
همونطور که گفتم ID باید در صفحه یدونه باشه وگرنه اگه ۲ تگ با یک ID یکسان وجود داشته باشه ، عملیات بروی اولین ID اجرا خواهد شد.
پس تو این روش ما با استفاده از ID یک تگ ( یا عنصر ) اون رو در زبان JS انتخاب میکنیم ، که شکل کلی این انتخابگر بصورت زیر می باشد :
|
1 |
document.getElementById(" نام آی دی ") |
مثال شماره ۱ : تگ h2 رو که آی دی ( Result ) داره انتخاب کردیم و بعدش با استفاده از innerHTML داخلش یک محتوا ایجاد / چاپ کردیم.
|
1 2 3 4 5 6 7 8 9 |
<body> <h2 id="Result"></h2> <script> document.getElementById("Result").innerHTML = "فری لرن"; </script> </body> |
مثال شماره ۲ : ۳ عدد تگ با یک ID یکسان وجود دارد ، ولی برنامه فقط بروی اولین ID اعمال خواهد شد. ( پس برای همینه که میگیم باید ID منحصر بفرد باشه )
|
1 2 3 4 5 6 7 8 9 10 11 |
<body> <h2 id="Result"></h2> <h2 id="Result"></h2> <h2 id="Result"></h2> <script> document.getElementById("Result").innerHTML = "فری لرن"; </script> </body> |
Free-Learn
انتخاب عناصر از طریق کلاس یا Class
خب در ادامه آموزش انتخابگرها در جاوااسکریپت ، در این روش ما میتونیم تگ هارو بر اساس نام کلاسشون انتخاب کنیم، یعنی مثلا اگه کلاسی داشتیم به اسم test میتونیم همین رو در JS انتخاب و باهاش کار کنیم.
ولی یه سوال و نکته اینجاست؟! خب شاید ما ۱۰تا مثلا کلاس test داشته باشیم اونوقت چی میشه؟ چجوری انتخاب میشن؟ آیا تغییرات برای تمامی کلاس ها اعمال میشه؟
پاسخ : باید وقتی کلاسی رو انتخاب میکنیم باید ایندکس ( یا Index یا شماره جایگاه عنصر ) رو هم در صفحه مشخص کنیم ، که شماره ایندکس از ۰ شروع میشه ، یعنی مثلا برای اولین کلاس در صفحه میشه ایندکس ۰ و برای دومین کلاس ایندکس ۱ و همینطور تا هرچقدر که کلاس وجود داشته باشه.
شکل کلی انتخابگر کلاس با ایندکس :
|
1 |
document.getElementsByClassName("Class_Name")[ Index_Number ] |
مثال شماره ۱ : سه تا کلاس با نام یکسان داریم که میخوایم انتخابشون کنیم.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<body> <h2 class="Result"></h2> <h2 class="Result"></h2> <h2 class="Result"></h2> <script> document.getElementsByClassName("Result")[0].innerHTML="سلام خوبی؟"; document.getElementsByClassName("Result")[1].innerHTML="به سایت آموزشی فری لرن"; document.getElementsByClassName("Result")[2].innerHTML="خوش اومدی"; </script> </body> |
Free-Learn
انتخاب عناصر از طریق نام عنصر ( همون نام تگ )
اینم از اسمش مشخصه دیگه ، انتخاب از طریق نام تگ ، مثلا اگه خواستیم تگ P رو انتخاب کنیم خیلی راحت مینویسیم p و انتخابش میکنیم.
ولی اینم مثله جریان کلاس ، ممکنه ۱۰ تا تگ P تو صفحه باشه اونموقع باید چکار کرد؟! اینم باید وقتی نام تگ رو انتخاب میکنیم ایندکس ( یا Index یا شماره جایگاه عنصر ) رو هم در صفحه مشخص کنیم.
شکل کلی انتخابگر نام تگ :
|
1 |
document.getElementsByTagName(" Tag_Name ")[ Index_Number ] |
مثال : در مثال زیر ما ۳ تا تگ H2 داریم ، همونطور که گفتیم شماره ایندکس برای هر یک از عناصر از ۰ شروع میشه، یعنی الان ایندکس شماره ۰ یعنی میشه اولین تگ h2 و ایندکس شماره ۱ میشه دومین تگ h2 و در نهایت سومین تگ h2 هم میشه ایندکس شماره ۲
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<body> <h2></h2> <h2></h2> <h2></h2> <script> document.getElementsByTagName("h2")[0].innerHTML="سلام خوبی؟"; document.getElementsByTagName("h2")[1].innerHTML="به سایت آموزشی فری لرن"; document.getElementsByTagName("h2")[2].innerHTML="خوش اومدی"; </script> </body> |
Free-Learn
انتخاب از طریق صفت Name
در این روش میتونیم تگ هارو از درون صفحه بر اساس مقدار صفت Name ( نام یک تگ از طریق صفت name مشخص میشه ) انتخاب نماییم ، ولی خب ممکنه ما چندین تگ با نام مشابه داشته باشیم باید چکار کرد؟!
باید شماره ایندکس ( یا Index ) اون تگ که میخوایم بدستش بیاریم رو وارد کنیم، شماره ایندکس هم دیگه باید بدونید همیشه از ۰ شروع میشه تا بی نهایت ( یعنی به تعداد نام هایی که در صفحه وجود دارد )
شکل کلی این انتخابگر :
|
1 |
document.getElementsByName( Element_Name )[ Index_Number ] |
- Element_Name : نام صفت
- Index_Number : شماره ایندکس یا شماره جایگاه
مثال :
|
1 2 3 4 5 6 7 8 9 10 |
<script> function get_info(){ var UserName , result; UserName = document.getElementsByName("user_name")[0].value; result = document.getElementById("Result"); result.innerHTML = "User Name : " + UserName; } </script> |
Free-Learn
انتخاب از طریق متد querySelectorAll
اگه آموزش انتخابگرهای CSS رو خونده باشید خب میدونید ما از روش های مختلف میتونیم عناصر موجود در صفحه رو انتخاب و در CSS بهشون استایل بدیم ، حال همون روش هارو میتونیم در جاوااسکریپت داشته باشیم.
شکل کلی این انتخابگر بصورت زیر می باشد :
|
1 |
document.querySelectorAll(" انتخابگرهای سی اس اس ")[ Index_Number ] |
مثال شماره ۱ : انتخاب اولین تگ h2 که کلاس test دارد
|
1 2 3 4 5 |
<script> document.querySelectorAll("h2.test")[0].innerHTML = "فری لرن"; </script> |
مثال شماره ۲ : انتخاب چندین تگ بصورت همزمان ( در این مثال با استفاده از حلقه for کاری کردیم که تمامی تگ های h2 و p و span که در صفحه وجود دارند انتخاب شن و داخل همشون کلمه ‘ فری لرن ‘ چاپ بشه )
|
1 2 3 4 5 6 7 8 9 |
<script> var MyTag = document.querySelectorAll("h2,p,span"); var i; for (i = 0; i < MyTag.length; i++) { MyTag[i].innerHTML = "فری لرن"; } </script> |
مثال شماره ۳ : انتخاب تمامی تگ های H2 که ID شون برابر است با Result و سپس رنگ متن همشون آبی بشه و در وسط صفحه قرار بگیرند.
|
1 2 3 4 5 6 7 8 9 10 |
<script> var MyTag = document.querySelectorAll("h2#Result"); var i; for (i = 0; i < MyTag.length; i++) { MyTag[i].style.color = "blue"; MyTag[i].style.textAlign = "center"; } </script> |
مثال شماره ۴ : انتخاب صفت یک تگ ( اون تگ img رو انتخاب میکنه که دارای صفت title باشه )
|
1 2 3 4 5 6 |
<script> var MyImage = document.querySelectorAll("img[title]")[0]; MyImage.style.border = "3px solid red"; </script> |
Free-Learn
انتخاب از طریق متد querySelector
این روش هم مثه روش قبلی هست و درکل فرقی ندارند، فقط تنها تفاوتش در اینه که querySelector فقط ۱دونه تگ میتونه انتخاب کنه، یعنی اگه مثلا ۱۰تا کلاس test داشتیم، این اولین کلاس رو انتخاب میکنه و بقیه رو کاری نداره، حال اگه بخوایم انتخاب رو از بین تمامی عناصر انجام بدیم باید از متد ()querySelectorAll استفاده نماییم.
مثال شماره ۱ : انتخاب تگ H2 که دارای کلاس free-learn می باشد
|
1 2 3 4 5 6 7 |
<script> var MyTag; MyTag = document.querySelector("h2.free-learn"); MyTag.style.color = "blue"; </script> |
