آموزش انتخابگرها در جاوااسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش انتخابگرها در جاوااسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
آموزش انتخابگرها در جاوااسکریپت
زبان جاوااسکریپت هم مثه زبان CSS این قدرت رو داره که بتونه عناصر رو از درون صفحه انتخاب و حالا بعدش مثلا استایل بده یا مثلا محتواشو تغییر بده و…
ما در زبان JS از چندین روش میتونیم عناصر رو از صفحه انتخاب کنیم که این روش ها به شرح زیر می باشد :
- انتخاب عناصر از طریق ID یا شناسه
- انتخاب عناصر از طریق کلاس یا Class
- انتخاب عناصر از طریق نام عنصر ( همون نام تگ )
- انتخاب عناصر از طریق انتخابگرهای CSS ( یعنی به همون شکلی که عناصر رو در زبان CSS انتخاب میکنیم اینجاهم میتونیم استفاده کنیم )
Free-Learn
انتخاب عناصر از طریق ID یا شناسه
خب ID یا شناسه رو که دیگه میدونیم چیه!؟ میدونیم که ID یک شناسه منحصر بفرد هست که با استفاده از صفت ID در زبان HTML ایجاد میشه ، اینکه میگیم منحصر بفرد یعنی باید از اون ID تو صفحه فقط یک عدد باشه.
همونطور که گفتم ID باید در صفحه یدونه باشه وگرنه اگه ۲ تگ با یک ID یکسان وجود داشته باشه ، عملیات بروی اولین ID اجرا خواهد شد.
پس تو این روش ما با استفاده از ID یک تگ ( یا عنصر ) اون رو در زبان JS انتخاب میکنیم ، که شکل کلی این انتخابگر بصورت زیر می باشد :
|
1 |
document.getElementById(" نام آی دی ") |
مثال شماره ۱ : تگ h2 رو که ID ( تست – test ) داره انتخاب کردیم و بعدش با استفاده از innerHTML داخلش یک محتوا ایجاد / چاپ کردیم.
|
1 2 3 4 5 |
<h2 id="test"></h2> <script> document.getElementById("test").innerHTML="سلام خوبی؟"; </script> |
مثال شماره ۲ : ۳ عدد تگ با یک ID یکسان وجود دارد ، ولی برنامه فقط بروی اولین ID اعمال خواهد شد. ( پس برای همینه که میگیم باید ID منحصر بفرد باشه )
|
1 2 3 |
<h2 id="test"></h2> <p id="text"></p> <span id="test"></span> |
Free-Learn
انتخاب عناصر از طریق کلاس یا Class
خب در ادامه آموزش انتخابگرها در جاوااسکریپت ، در این روش ما میتونیم عناصر رو بر اساس نام کلاسشون انتخاب کنیم، یعنی مثلا اگه کلاسی داشتیم به اسم test میتونیم همین رو در JS انتخاب و باهاش کار کنیم.
این روش در مرورگر اینترنت اکسپلورر یا IE از نسخه ۸ به پایین کار نمیکند.
ولی یه سوال و نکته اینجاست؟! خب شاید ما ۱۰تا مثلا کلاس test داشته باشیم اونوقت چی میشه؟ چجوری انتخاب میشن؟ آیا تغییرات برای تمامی کلاس ها اعمال میشه؟
پاسخ : باید وقتی کلاسی رو انتخاب میکنیم ایندکس ( یا Index یا شماره جایگاه عنصر ) رو هم در صفحه مشخص کنیم ، که شماره ایندکس از ۰ شروع میشه ، یعنی مثلا برای اولین کلاس در صفحه میشه ایندکس ۰ و برای دومین کلاس ایندکس ۱ و همینطور تا بی نهایت.
شکل کلی انتخابگر کلاس با ایندکس :
|
1 |
document.getElementsByClassName("Class_Name")[ Index_Number ] |
مثال شماره ۱ :
|
1 2 3 4 5 6 7 8 9 |
<h2 class="test"></h2> <p class="test"></p> <span class="test"></span> <script> document.getElementsByClassName("test")[0].innerHTML="سلام خوبی؟"; document.getElementsByClassName("test")[1].innerHTML="به سایت آموزشی فری لرن"; document.getElementsByClassName("test")[2].innerHTML="خوش اومدی"; </script> |
Free-Learn
انتخاب عناصر از طریق نام عنصر ( همون نام تگ )
اینم از اسمش مشخصه دیگه ، انتخاب از طریق نام تگ ، مثلا اگه خواستیم تگ P رو انتخاب کنیم خیلی راحت مینویسیم p و انتخابش میکنیم.
ولی اینم مثله جریان کلاس ، ممکنه ۱۰ تا تگ P تو صفحه باشه اونموقع باید چکار کرد؟! اینم باید وقتی نام تگ رو انتخاب میکنیم ایندکس ( یا Index یا شماره جایگاه عنصر ) رو هم در صفحه مشخص کنیم.
شکل کلی انتخابگر نام تگ :
|
1 |
document.getElementsByTagName(" Tag_Name ")[ Index_Number ] |
مثال : در مثال زیر ما ۲ تا تگ H2 و ۲ تاهم تگ P داریم ، همونطور که گفتیم شماره ایندکس برای هر یک از عناصر از ۰ شروع میشه، یعنی الان که ۲ تا H2 داریم ، اولی ایندکسش میشه ۰ و دومین ایندکسش میشه ۱
|
1 2 3 4 5 6 7 8 9 |
<h2></h2> <h2>این دومین تگ h2 هست</h2> <p>این اولین تگ p هست</p> <p></p> <script> document.getElementsByTagName("h2")[0].innerHTML="سلام خوبی؟"; document.getElementsByTagName("p")[1].innerHTML="سایت آموزشی فری لرن"; </script> |
Free-Learn
انتخاب عناصر از طریق انتخابگرهای CSS
اگه آموزش انتخابگرهای CSS رو خونده باشید خب میدونید ما از روش های مختلف میتونیم عناصر موجود در صفحه رو انتخاب و در CSS بهشون استایل بدیم ، حال همون روش هارو میتونیم در جاوااسکریپت داشته باشیم.
این روش در مرورگر اینترنت اکسپلورر یا IE از نسخه ۸ به پایین کار نمیکند.
شکل کلی این انتخابگر بصورت زیر می باشد :
|
1 |
document.querySelectorAll(" انتخابگرهای سی اس اس ")[ Index_Number ] |
مثال شماره ۱ : انتخاب اولین تگ h2 که کلاس test دارد
|
1 2 3 4 5 6 |
<h2 class="test"></h2> <p class="test"></p> <script> document.querySelectorAll("h2.test")[0].innerHTML="سلام خوبی؟"; </script> |
مثال شماره ۲ : انتخاب چندین تگ بصورت همزمان ( در این مثال با استفاده از حلقه for کاری کردیم که تمامی تگ های h2 و p و span که در صفحه وجود دارند انتخاب شن و داخل همشون کلمه سلام خوبی؟ چاپ بشه )
|
1 2 3 4 5 6 7 |
<script> var myelement = document.querySelectorAll("h2,p,span"); var i; for (i = 0; i < myelement.length; i++) { myelement[i].innerHTML="سلام خوبی؟"; } </script> |
مثال شماره ۳ : انتخاب تمامی تگ های H2 که ID شون برابر است با test و سپس رنگ متن همشون آبی بشه و در وسط صفحه قرار بگیرند.
|
1 2 3 4 5 6 7 8 |
<script> var myelement = document.querySelectorAll("h2#test"); var i; for (i = 0; i < myelement.length; i++) { myelement[i].style.color="blue"; myelement[i].style.textAlign="center"; } </script> |
مثال شماره ۴ : انتخاب صفت یک تگ ( تگ img را انتخاب میکند که از صفت title استفاده کرده باشد )
|
1 2 3 4 5 6 7 |
<img src="img/logo.png" title="free-learn"> <img src="img/logo.png"> <script> var x = document.querySelectorAll("img[title]")[0]; x.style.border="3px solid red"; </script> |
