این آموزش در تاریخ ۱۴۰۱/۰۴/۱۹ آپدیت شده است.
نحوه انتخاب عناصر از صفحه در جاوا اسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش نحوه انتخاب عناصر از صفحه در جاوا اسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
نحوه انتخاب عناصر از صفحه در جاوا اسکریپت
خب من در جلسه قبلی اشاره کردم که DOM یعنی بطور کلی ، نحوه دسترسی به تگ ها و صفت های موجود در صفحه و تغییر ( حذف یا اضافه یا ویرایش ) دادن همون تگ ها و صفت ها می باشد.
حال ما روش های مختلفی داریم برای اینکه بتونیم به تگ های موجود در صفحه دسترسی پیدا کنیم، ( دسترسی پیدا کنیم یعنی مثلا بتونیم فلان تگ رو از صفحه انتخاب کنیم ) که این روش های دسترسی به شرح زیر می باشند :
- انتخاب از طریق ID یا شناسه
- انتخاب از طریق کلاس یا Class
- انتخاب از طریق نام تگ ( نام خوده تگ )
- انتخاب از طریق صفت Name ( که از طریق صفت Name مشخص شده باشه )
- انتخاب از طریق متد querySelectorAll
- انتخاب از طریق متد querySelector
کمی قبلتر در جلسات آموزش مقدماتی جاوااسکریپت با آموزش انتخابگرهارو در جاوا اسکریپت آشنا شدیم، در صورت تمایل میتونید اون آموزش رو مشاهده نمایید چون با این جلسه که الان داخلش هستیم یکی هست و فرقی نداره.
Free-Learn
نحوه انتخاب عناصر از صفحه از طریق ID
مطمعنم که دیگه میدونید ID یا شناسه چیه؟ و اینکه کلا چجوری ID رو ایجاد میکنیم و از این حرفا؟! بطور کلی به اون نام ( یا شناسه یا ID ) که برای یک تگ مشخص میکنم میگیم ID
خوده ID رو باید با استفاده از صفت id در زبان HTML ایجاد کنیم ( که پیشنهاد میکنم حتما آموزش نحوه ایجاد id در HTML رو مشاهده نمایید )
و اینم فک کنم میدونید ( اگه هم اطلاعی نداشتید دیگه از الان بدونید ) از ID ها بیشتر در جاوا اسکریپت استفاده میشه، نکه نشه مثلا در CSS استفاده کرد! نه اتفاقا میشه در CSS هم استفاده کرد ، ولی خب خاصیت و اساس ID برای استفاده در جاوااسکریپت هست، یعنی در یه کلام بیشترین استفاده از ID ها در زبان جاوا اسکریپت می باشد.
شکل کلی برای انتخاب عناصر از طریق ID در زبان جاوااسکریپت :
|
1 |
document.getElementById( "ID_Name" ); |
- ID_Name : میشه نام همون آی دی مون
مثال شماره ۱ : تگ h2 رو که آی دی ( Result ) داره انتخاب کردیم و بعدش با استفاده از innerHTML داخلش یک متن دلخواه چاپ کردیم.
|
1 2 3 |
<script> document.getElementById("Result").innerHTML = "فری لرن"; </script> |
مثال شماره ۲ : سه تا تگ با یک 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
خب ما در مرحله قبلی یاد گرفتیم که چجوری میتونیم از طریق ID عناصر رو از صفحه انتخاب نماییم، حال در این مرحله ما میتونیم از طریق Class ( یا نام کلاس ) نیز یک تگ رو از صفحه انتخاب نمایید.
پیشنهاد میکنم آموزش نحوه ایجاد کلاس در HTML رو مشاهده نمایید.
ولی یه سوال و نکته اینجاست؟! خب شاید ما ۱۰تا مثلا کلاس test داشته باشیم اونوقت چی میشه؟ چجوری انتخاب میشن؟ آیا تغییرات برای تمامی کلاس ها اعمال میشه؟
پاسخ : باید وقتی کلاسی رو انتخاب میکنیم باید ایندکس ( یا Index یا شماره جایگاه عنصر ) رو هم در صفحه مشخص کنیم ، که شماره ایندکس از ۰ شروع میشه ، یعنی مثلا برای اولین کلاس در صفحه میشه ایندکس ۰ و برای دومین کلاس ایندکس ۱ و همینطور تا هرچقدر که کلاس وجود داشته باشه.
شکل کلی برای انتخاب عناصر از طریق نام کلاس ( Class ) در زبان جاوااسکریپت :
|
1 |
document.getElementsByClassName("Class_Name")[ Index_Number ]; |
- 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
نحوه انتخاب عناصر از صفحه از طریق نام تگ
اینم که از اسمش مشخصه ، ما میتونیم عناصر ( تگ هارو ) از طریق نامشون انتخاب نماییم، فقط اینم مثه جریان کلاس ، باید حتما شماره ایندکس یا Index عنصر رو مشخص کنیم.
مثال : در مثال زیر ما ۳ تا تگ 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 11 |
<body> <input type="text" name="user_name" value="free-learn"> <script> document.getElementsByName("user_name")[0].value; </script> </body> |
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> |
