خانه آموزش زبان جاوااسکریپت آموزش JS مقدماتی آموزش انتخابگرها در جاوااسکریپت

آموزش انتخابگرها در جاوااسکریپت

توسط

۱۳۹۹-۰۶-۲۹

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

آموزش انتخابگرها در جاوااسکریپت

Free-Learn

آنچه در این جلسه میخوانید :

1 آموزش انتخابگرها در جاوااسکریپت
2 انتخاب عناصر از طریق ID یا شناسه
3 انتخاب عناصر از طریق کلاس یا Class
4 انتخاب عناصر از طریق نام عنصر ( همون نام تگ )
5 انتخاب عناصر از طریق انتخابگرهای CSS

آموزش انتخابگرها در جاوااسکریپت

زبان جاوااسکریپت هم مثه زبان CSS این قدرت رو داره که بتونه عناصر رو از درون صفحه انتخاب و حالا بعدش مثلا استایل بده یا مثلا محتواشو تغییر بده و…

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

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

Free-Learn

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

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

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

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

document.getElementById(" نام آی دی ")

1	document.getElementById(" نام آی دی ")

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

<h2 id="test"></h2>

<script>
 document.getElementById("test").innerHTML="سلام خوبی؟";
</script>

document.getElementById("test").innerHTML="سلام خوبی؟";

</script>

امتحان کنید

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

<h2 id="test"></h2>
<p id="text"></p>
<span id="test"></span>

امتحان کنید

Free-Learn

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

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

این روش در مرورگر اینترنت اکسپلورر یا IE از نسخه ۸ به پایین کار نمیکند.

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

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

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

document.getElementsByClassName("Class_Name")[ Index_Number ]

1	document.getElementsByClassName("Class_Name")[ Index_Number ]

مثال شماره ۱ :

<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>

document.getElementsByClassName("test")[0].innerHTML="سلام خوبی؟";

document.getElementsByClassName("test")[1].innerHTML="به سایت آموزشی فری لرن";

document.getElementsByClassName("test")[2].innerHTML="خوش اومدی";

</script>

امتحان کنید

Free-Learn

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

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

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

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

document.getElementsByTagName(" Tag_Name ")[ Index_Number ]

1	document.getElementsByTagName(" Tag_Name ")[ Index_Number ]

مثال : در مثال زیر ما ۲ تا تگ H2 و ۲ تاهم تگ P داریم ، همونطور که گفتیم شماره ایندکس برای هر یک از عناصر از ۰ شروع میشه، یعنی الان که ۲ تا H2 داریم ، اولی ایندکسش میشه ۰ و دومین ایندکسش میشه ۱

<h2></h2>
<h2>این دومین تگ h2 هست</h2>
<p>این اولین تگ p هست</p>
<p></p>

<script>
 document.getElementsByTagName("h2")[0].innerHTML="سلام خوبی؟";
 document.getElementsByTagName("p")[1].innerHTML="سایت آموزشی فری لرن";
</script>

<h2>این دومین تگ h2 هست</h2>

<p>این اولین تگ p هست</p>

<p></p>

document.getElementsByTagName("h2")[0].innerHTML="سلام خوبی؟";

document.getElementsByTagName("p")[1].innerHTML="سایت آموزشی فری لرن";

</script>

امتحان کنید

Free-Learn

انتخاب عناصر از طریق انتخابگرهای CSS

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

این روش در مرورگر اینترنت اکسپلورر یا IE از نسخه ۸ به پایین کار نمیکند.

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

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

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

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

<h2 class="test"></h2>
<p class="test"></p>

<script>
 document.querySelectorAll("h2.test")[0].innerHTML="سلام خوبی؟";
</script>

document.querySelectorAll("h2.test")[0].innerHTML="سلام خوبی؟";

</script>

امتحان کنید

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

<script>
 var myelement = document.querySelectorAll("h2,p,span");
 var i;
 for (i = 0; i < myelement.length; i++) {
  myelement[i].innerHTML="سلام خوبی؟";
 }
</script>

var myelement = document.querySelectorAll("h2,p,span");

var i;

for (i = 0; i < myelement.length; i++) {

myelement[i].innerHTML="سلام خوبی؟";

}

</script>

امتحان کنید

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

<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>

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 استفاده کرده باشد )

<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>

var x = document.querySelectorAll("img[title]")[0];

x.style.border="3px solid red";

</script>

امتحان کنید

Free-Learn

فروشگاه فری لرن

دریافت PDF یا پرینت این مطلب