این آموزش در تاریخ ۱۳۹۹/۱۱/۱۴ آپدیت شده است.
نحوه انتخاب عناصر از صفحه در جاوا اسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش نحوه انتخاب عناصر از صفحه در جاوا اسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
نحوه انتخاب عناصر از صفحه در جاوا اسکریپت
خب ما در جلسه قبلی گفتیم که DOM یعنی بطور کلی ، نحوه دسترسی به عناصر موجود در صفحه و تغییر ( حذف یا اضافه یا ویرایش ) دادن عناصر می باشد.
حال ما روش های مختلفی داریم برای اینکه بتونیم به عناصر موجود در صفحه دسترسی پیدا کنیم، ( دسترسی پیدا کنیم یعنی مثلا بتونیم فلان تگ رو از صفحه انتخاب کنیم ) که این روش های دسترسی به شرح زیر می باشند :
- انتخاب از طریق ID
- انتخاب از طریق Class
- انتخاب از طریق نام تگ
- انتخاب از طریق انتخابگرهای CSS
کمی قبلتر در جلسات قبلی آموزش انتخابگرهارو در جاوا اسکریپت باهمدیگه کار کردیم، در صورت تمایل میتونید اون آموزش رو مشاهده نمایید چون با این جلسه که الان میخوایم کارش کنیم یکی هست و فرقی نداره.
Free-Learn
نحوه انتخاب عناصر از صفحه از طریق ID
مطمعنم که دیگه میدونید ID یا شناسه چیه؟ و اینکه کلا چجوری ID رو ایجاد میکنیم و از این حرفا؟! بطور کلی به اون نام ( یا شناسه یا ID ) که برای یک عنصر مشخص میکنم میگیم ID
خوده ID رو باید با استفاده از صفت id در زبان HTML ایجاد کنیم ( که پیشنهاد میکنم حتما آموزش نحوه ایجاد id در HTML و در تگ ها یا عناصر HTML رو مشاهده نمایید )
و اینم فک کنم میدونید ( اگه هم اطلاعی نداشتید دیگه از الان بدونید ) از ID ها بطور کلی برای جاوااسکریپت استفاده میشه، نکه نشه مثلا در CSS استفاده کرد! نه اتفاقا میشه در CSS هم استفاده کرد ، ولی خب خاصیت و اساس ID برای استفاده در جاوااسکریپت هست، یعنی در یه کلام بیشترین استفاده از ID ها در زبان جاوا اسکریپت می باشد.
شکل کلی برای انتخاب عناصر از طریق ID در زبان جاوااسکریپت :
|
1 |
document.getElementById( "ID_Name" ); |
- ID_Name : میشه نام همون آی دی مون
مثال شماره ۱ : انتخاب تگ h2 که دارای ID بنام test می باشد و قرار دادن متن ” سایت آموزشی فری لرن ” در آن
|
1 2 3 4 5 |
<script> document.getElementById("test").innerHTML = "سایت آموزشی فری لرن"; </script> |
مثال شماره ۲ : وقتی بروی دکمه کلیک میشه ، متنی که درون تگ H2 هست رو در درون Input میریزه و نمایش میده.
|
1 2 3 4 5 6 |
function Change(){ var MyH2 , MyInput; MyH2 = document.getElementById("test").innerHTML; MyInput = document.getElementById("myinput"); MyInput.value = MyH2; } |
Free-Learn
نحوه انتخاب عناصر از صفحه از طریق Class
خب ما در مرحله قبلی یاد گرفتیم که چجوری میتونیم از طریق ID عناصر رو از صفحه انتخاب نماییم، حال در این مرحله ما میتونیم از طریق Class ( یا نام کلاس ) نیز یک تگ رو از صفحه انتخاب نمایید.
پیشنهاد میکنم آموزش نحوه ایجاد کلاس در HTML رو مشاهده نمایید.
شاید ما ۱۰تا مثلا کلاس test داشته باشیم اونوقت چی میشه؟ چجوری انتخاب میشن؟ آیا تغییرات برای تمامی کلاس ها اعمال میشه؟
جواب بطور کلی خیر می باشد، باید وقتی کلاسی رو انتخاب میکنیم ایندکس ( یا Index یا شماره جایگاه عنصر ) رو هم در صفحه مشخص کنیم ، که شماره ایندکس از ۰ شروع میشه ، یعنی مثلا برای اولین کلاس در صفحه میشه ایندکس ۰ و برای دومین کلاس ایندکس ۱ و همینطور تا بی نهایت.
شکل کلی برای انتخاب عناصر از طریق نام کلاس ( Class ) در زبان جاوااسکریپت :
|
1 |
document.getElementsByClassName("Class_Name")[ Index_Number ]; |
- Class_Name : میشه همون نام کلاس مون
- Index_Number : میشه شماره ایندکس یا جایگاه عنصر در صفحه
مثال شماره ۱ : در صفحه ۳ تا تگ وجود داره که کلاس test دارند، همونطور که اشاره کردم، چون میخوایم از کلاس استفاده کنیم باید حتما شماره ایندکس کلاس رو هم مشخص کنیم، دیگه همیشه بدونید از بالا ( ابتدای صفحه ) به پایین شماره ایندکس از ۰ شروع میشه. یعنی اولین تگی که کلاس test داره شماره ایندکسش میشه ۰ و بعدیش میشه ۱ و بعدیش میشه ۲ و همینجور تا موقعی که کلاس باشه.
|
1 2 3 4 5 6 7 |
<script> document.getElementsByClassName("test")[0].innerHTML = "سلام خوبی؟"; document.getElementsByClassName("test")[1].innerHTML = "سایت آموزشی فری لرن"; document.getElementsByClassName("test")[2].innerHTML = "سلام خوبی؟"; </script> |
Free-Learn
نحوه انتخاب عناصر از صفحه از طریق نام تگ
اینم که از اسمش مشخصه ، ما میتونیم عناصر ( تگ هارو ) از طریق نامشون انتخاب نماییم، فقط اینم مثه جریان کلاس ، باید حتما شماره ایندکس یا Index عنصر رو مشخص کنیم.
مثال شماره ۱ : انتخاب تمامی تگ های تیتر H2 در صفحه و چاپ متن در آنها
|
1 2 3 4 5 6 7 |
<script> document.getElementsByTagName("h2")[0].innerHTML = "سلام خوبی؟"; document.getElementsByTagName("h2")[1].innerHTML = "سایت آموزشی فری لرن"; document.getElementsByTagName("h2")[2].innerHTML = "سلام خوبی؟"; </script> |
Free-Learn
نحوه انتخاب عناصر از صفحه از طریق انتخابگرهای CSS
اگه آموزش زبان CSS و انتخابگرهاشو دنبال کرده باشید ، میدونید که روش های مختلفی در CSS داریم که میتونیم از طریق این روش ها، عناصر ( تگ ها ) رو در صفحه انتخاب نماییم و بهشون استایل بدیم.
حال ما در جاوا اسکریپت نیز میتونیم از این روش ها برای انتخاب عناصر در صفحه استفاده نماییم، که ۲ روش کلی در جاوااسکریپت برای استفاده از انتخابگرهای CSS وجود دارد :
- querySelector() : فقط یه دونه میتونه انتخاب کنه
- querySelectorAll() : همزمان چنتا میتونه انتخاب کنه
استفاده از querySelector :
در این روش اولین عنصر ( تگی ) که با انتخابگر ما مطابقت داشته باشه رو پیدا میکنه و عملیات مورد نظر مارو روش پیاده میکنه. ( توجه داشته باشید فقط اولین تگ رو انتخاب میکنه و کاری به بقیه نداره ولی querySelectorAll میتونه عملیات رو بروی تمامی تگ های موجود در صفحه اعمال کنه )
مثال شماره ۱ : انتخاب تگ h2 که دارای کلاس test می باشد.
|
1 2 3 4 5 |
<script> document.querySelector("h2.test").innerHTML = "سایت آموزشی فری لرن"; </script> |
مثال شماره ۲ : انتخاب تگ h2 که دارای id بنام test می باشد.
|
1 2 3 4 5 |
<script> document.querySelector("h2#test").innerHTML = "سایت آموزشی فری لرن"; </script> |
استفاده از querySelectorAll :
همونطور که اشاره کردم در این روش دیگه اینجوری نیست که فقط اولین عنصر رو پیدا کنه ، بلکه میتونه تمامی عناصر رو پیدا کنه و تو هرکدوم که ما خواستیم عملیات انجام بدیم.
فقط نکته ای که هست، اینم همانند اون جریان باید حتما شماره ایندکس یا Index عنصر رو مشخص کنیم که دقیق مشخص باشه که عملیات بروی کدام عنصر پیاده شه.
مثال شماره ۱ : چندین تگ h2 در صفحه وجود داره که همشونم کلاس test دارند، ولی خب ما میخوایم فقط تگ h2 که شماره ایندکس ۲ داره رو انتخاب کنیم.
|
1 2 3 4 5 |
<script> document.querySelectorAll("h2.test")[2].innerHTML = "سایت آموزشی فری لرن"; </script> |
مثال شماره ۲ : استفاده از حالت تودرتو ( میخوایم تگ P که دارای کلاس test می باشد و دوباره همین تگ P درون تگ H2 هست و دوباره همین تگ H2 درون تگ Div هست رو انتخاب کنیم )
|
1 2 3 4 5 |
<script> document.querySelectorAll("div h2 p.test")[0].innerHTML = "سایت آموزشی فری لرن"; </script> |
