بررسی انتخابگرها (Selectors) در جاوااسکریپت

خب بطور کلی ما برای اینکه بتونیم به یک تگ در صفحه دسترسی پیدا کنیم ( حالا مثلا بعدش بخوایم محتواشو تغییر بدیم یا مثلا حذفش کنیم و… ) باید اول بتونیم اون تگ رو انتخاب کنیم.

در زبان CSS هم دقیقا به همین شکل هستش، یعنی مثلا بخوایم به یک تگ استایل بدیم باید اول از طریق انتخابگرهای CSS اون تگ رو انتخاب کنیم بعدش بهش استایل میدیم.

حال در زبان جاوااسکریپت هم دقیقا به همین صورت می باشد، یعنی برای اینکه بتونیم یک تگ رو از تو صفحه بگیریم باید بتونیم اول انتخابش کنیم بعدش حالا هرکاری دوس داشتیم روش انجام بدیم.

ما در زبان جاوااسکریپت از چندین روش می‌تونیم عناصر رو از صفحه انتخاب کنیم که این روش‌ها به شرح زیر است :

انتخاب از طریق ID یا شناسه
انتخاب از طریق کلاس یا Class
انتخاب از طریق نام تگ ( نام خوده تگ )
انتخاب از طریق صفت Name ( که از طریق صفت Name مشخص شده باشه )
انتخاب از طریق متد querySelectorAll
انتخاب از طریق متد querySelector

انتخاب عناصر از طریق ID یا شناسه

خب ID یا شناسه رو که دیگه می‌دونیم چیه!؟ می‌دونیم که ID یک شناسه منحصر بفرد هست که با استفاده از صفت ID در زبان HTML ایجاد می‌شه ، اینکه میگیم منحصر بفرد یعنی اون ID باید در زبان جاوااسکریپت و درکل داخل اون صفحه فقط یک عدد باشه.

همونطور که گفتم ID باید در صفحه یدونه باشه وگرنه اگه ۲ تگ با یک ID یکسان وجود داشته باشه ، عملیات بروی اولین ID اجرا خواهد شد.

پس تو این روش ما با استفاده از ID یک تگ ( یا عنصر ) اون رو در زبان JS انتخاب می‌کنیم ، که شکل کلی این انتخابگر بصورت زیر است :

document.getElementById(&quot نام آی دی &quot)

مثال شماره ۱ : تگ h2 رو که آی دی ( Result ) داره انتخاب کردیم و بعدش با استفاده از innerHTML داخلش یک محتوا ایجاد / چاپ کردیم.

<body>

<h2 id=&quotResult&quot></h2>


 document.getElementById(&quotResult&quot) = &quot!سلام دوست من"


</body>

مثال شماره ۲ : ۳ عدد تگ با یک ID یکسان وجود دارد ، ولی برنامه فقط بروی اولین ID اعمال خواهد شد. ( پس برای همینه که میگیم باید ID منحصر بفرد باشه )

<body>  

<h2 id=&quotResult&quot></h2>
 <h2 id=&quotResult&quot></h2>
<h2 id=&quotResult&quot></h2>

 
 document.getElementById(&quotResult&quot) = &quot!سلام دوست من"
   

</body>

انتخاب عناصر از طریق کلاس یا Class

خب در ادامه آموزش انتخابگرها Selectors در جاوااسکریپت ، در این روش ما می‌تونیم تگ هارو بر اساس نام کلاسشون انتخاب کنیم، یعنی مثلا اگه کلاسی داشتیم به اسم test می‌تونیم همین رو در JS انتخاب و باهاش کار کنیم.

ولی یه سوال و نکته اینجاست؟! خب شاید ما ۱۰ تا مثلا کلاس test داشته باشیم اونوقت چی میشه؟ چجوری انتخاب میشن؟ آیا تغییرات برای تمامی کلاس‌ها اعمال میشه؟

پاسخ : باید وقتی کلاسی رو انتخاب می‌کنیم باید ایندکس ( یا Index یا شماره جایگاه عنصر ) رو هم در صفحه مشخص کنیم ، که شماره ایندکس از 0 شروع میشه ، یعنی مثلا برای اولین کلاس در صفحه میشه ایندکس 0 و برای دومین کلاس ایندکس 1 و همینطور تا هرچقدر که کلاس وجود داشته باشه.

شکل کلی انتخابگر کلاس با ایندکس :

document.getElementsByClassName(&quotClass_Name&quot)[ Index_Number ]

مثال شماره ۱ : سه تا کلاس با نام یکسان داریم که می‌خوایم انتخابشون کنیم.

<body>

<h2 class=&quotResult&quot></h2>
<h2 class=&quotResult&quot></h2>
<h2 class=&quotResult&quot></h2>


 document.getElementsByClassName(&quotResult&quot)[0]=&quotسلام خوبی؟"
 document.getElementsByClassName(&quotResult&quot)[1]=&quotبه صفحه حسین شاه محمدی در ویرگول"
 document.getElementsByClassName(&quotResult&quot)[2]=&quotخوش اومدی"


</body>

انتخاب عناصر از طریق نام عنصر ( همون نام تگ )

اینم از اسمش مشخصه دیگه ، انتخاب از طریق نام تگ ، مثلا اگه خواستیم تگ P رو انتخاب کنیم خیلی راحت مینویسیم p و انتخابش می‌کنیم.

ولی اینم مثله جریان کلاس ، ممکنه ۱۰ تا تگ P تو صفحه باشه اونموقع باید چکار کرد؟! اینم باید وقتی نام تگ رو انتخاب می‌کنیم ایندکس ( یا Index یا شماره جایگاه عنصر ) رو هم در صفحه مشخص کنیم.

شکل کلی انتخابگر نام تگ :

document.getElementsByTagName(&quot Tag_Name &quot)[ Index_Number ]

مثال : در مثال زیر ما ۳ تا تگ H2 داریم ، همونطور که گفتیم شماره ایندکس برای هر یک از عناصر از 0 شروع میشه، یعنی الان ایندکس شماره 0 یعنی میشه اولین تگ h2 و ایندکس شماره 1 میشه دومین تگ h2 و در نهایت سومین تگ h2 هم میشه ایندکس شماره 2

<body>

<h2></h2> 
<h2></h2>
 <h2></h2> 

  
document.getElementsByTagName(&quoth2&quot)[0]=&quotسلام خوبی؟"  
document.getElementsByTagName(&quoth2&quot)[1]=&quotبه صفه من در ویرگول"  
document.getElementsByTagName(&quoth2&quot)[2]=&quotخوش اومدی" 
  

</body>

انتخاب از طریق صفت Name

در این روش می‌تونیم تگ‌هارو از درون صفحه بر اساس مقدار صفت Name ( نام یک تگ از طریق صفت name مشخص میشه ) انتخاب نماییم ، ولی خب ممکنه ما چندین تگ با نام مشابه داشته باشیم باید چکار کرد؟!

باید شماره ایندکس ( یا Index ) اون تگ که می‌خوایم بدستش بیاریم رو وارد کنیم، شماره ایندکس هم دیگه باید بدونید همیشه از 0 شروع میشه تا بی نهایت ( یعنی به تعداد نام‌هایی که در صفحه وجود دارد )

شکل کلی این انتخابگر :

document.getElementsByName( Element_Name )[ Index_Number ]

Element_Name : نام صفت
Index_Number : شماره ایندکس یا شماره جایگاه

مثال:

<body>

<input type=&quottext&quot name=&quotuser_name&quot value=&quotimhshahdi&quot>
<button =&quotget_info();&quot>کلیک کنید</button>
<h2 id=&quotResult&quot></h2>



function get_info() {
let UserName , result;
UserName = document.getElementsByName(&quotuser_name&quot)[0].value;
result = document.getElementById(&quotResult&quot);
 result = &quotUser Name : &quot + UserName;
}



</body>

انتخاب از طریق متد querySelectorAll

ما از روش های مختلف می‌تونیم عناصر موجود در صفحه رو انتخاب و در CSS بهشون استایل بدیم ، حال همون روش هارو می‌تونیم در جاوااسکریپت داشته باشیم.

شکل کلی این انتخابگر بصورت زیر می باشد :

document.querySelectorAll(&quot انتخابگرهای سی اس اس &quot)[ Index_Number ]

مثال شماره ۱ : انتخاب اولین تگ h2 که کلاس test دارد

<body>

<h2 class=&quottest&quot></h2>
<p class=&quottest&quot></p>


 document.querySelectorAll(&quoth2.test&quot)[0] = &quotسلام"


</body>

مثال شماره ۲ : انتخاب چندین تگ بصورت همزمان ( در این مثال با استفاده از حلقه for کاری کردیم که تمامی تگ های h2 و p و span که در صفحه وجود دارند انتخاب شن و داخل همشون کلمه ‘ سلام ‘ چاپ بشه )

<body>

<h2></h2>
<h2></h2>
<p></p>
<p></p>
<span></span>



let MyTag = document.querySelectorAll(&quoth2,p,span&quot);
for (let = 0; i < MyTag.length; i++) {
 MyTag[i] = &quotسلام"
}



</body>

مثال شماره ۳ : انتخاب تمامی تگ های H2 که ID شون برابر است با Result و سپس رنگ متن همشون آبی بشه و در وسط صفحه قرار بگیرند.

<body>

<h2 id=&quotResult&quot>صفحه حسین شاه محمدی در ویرگول</h2>
<h2 id=&quotResult&quot>آموزش قدم به قدم زبان جاوااسکریپت</h2>



let MyTag = document.querySelectorAll(&quoth2#Result&quot);
for (let i = 0; i < MyTag.length; i++) {
 MyTag[i].style.color = &quotblue"
 MyTag[i].style.textAlign = &quotcenter"
}

مثال شماره ۴ : انتخاب صفت یک تگ ( اون تگ img رو انتخاب میکنه که دارای صفت title باشه )

<body>

<img src=&quothttps://files.virgool.io/upload/users/200359/avatar/dazZ9K.jpeg?x-img=v1/resize,h_120,w_120/optimize,q_100&quot>
<img src=&quothttps://files.virgool.io/upload/users/200359/avatar/dazZ9K.jpeg?x-img=v1/resize,h_120,w_120/optimize,q_100&quot>



let MyImage = document.querySelectorAll(&quotimg[title]&quot)[0];
MyImage.style.border = &quot3px solid red"



</body>

انتخاب از طریق متد querySelector

این روش هم مثه روش قبلی هست و درکل فرقی ندارند، فقط تنها تفاوتش در اینه که querySelector فقط 1 دونه تگ می‌تونه انتخاب کنه، یعنی اگه مثلا 10 تا کلاس test داشتیم، این اولین کلاس رو انتخاب می‌کنه و بقیه رو کاری نداره، حال اگه بخوایم انتخاب رو از بین تمامی عناصر انجام بدیم باید از متد ()querySelectorAll استفاده نماییم.

مثال شماره ۱ : انتخاب تگ H2 که دارای کلاس imhshahdi است

<body>

<h2 class=&quotimhshahdi&quot>آیدی من در شبکه های اجتماعی : <a href=&quothttps://www.instagram.com/imhshahdi/&quot>imhshahdi</a></h2>
<h2 class=&quotimhshahdi&quot>آیدی من در شبکه های اجتماعی : <a href=&quothttps://www.instagram.com/imhshahdi/&quot>imhshahdi</a></h2>



var MyTag;
MyTag = document.querySelector(&quoth2.imhshahdi&quot);
MyTag.style.color = &quotblue"



</body>

توضیح مثال بالا :

خب در مثال بالا ما ۲تا تگ H2 داریم که کلاس imhshahdi دارند، ولی خب اگه توجه کنید در خروجی فقط اولین کلاس imhshahdi انتخاب شده، خب بله همونطور که گفتم متد querySelector فقط ۱دونه و اونم اولین رو انتخاب می‌کنه.

منبع: developer.mozilla.org