14
تشکر

نحوه انتخاب عناصر در JavaScript

جاوا اسکریپت - JavaScript

جاوا اسکریپت – JavaScript

یکی نکات مهم در یادگیری JavaScript در HTML نحوه انتخاب عناصر صفحه است. در JavaScript به چند روش مختلف میتوان عناصر را انتخاب کرد.

در ادامه با ما همراه باشید…

انتخاب عناصر با استفاده از ID

توسط متد getElementByID میتوان یک عنصر را با استفاده از ID آن انتخاب کرد. در کد زیر ما عنصر با آی دی text را انتخاب کردیم همچنین به عنوان نمونه رنگ آن را عوض کردیم.

var myObj = document.getElementById("text");
myObj.style.color = "#b2b";

انتخاب عناصر با استفاده از نام تگ

این امکان توسط متد getElementsByTagName انجام میشود. برای مثال در کد زیر ما تمام تگ های p را انتخاب و رنگ اولین عنصر آن را عوض کردیم.

var myObj = document.getElementsByTagName("p");
myObj[0].style.color = "#b2b";

انتخاب عناصر بر اساس نام کلاس

توسط متد getElementsByClassName میتوان عناصر را با توجه به نام کلاس انتخاب کرد. مانند مثال زیر:

var myObj = document.getElementsByClassName("foo");
myObj[0].style.color = "#b2b";

انتخاب عناصر بر اساس مقدار خاصیت Name

این متد زیاد مورد استفاده قرار نمیگیرد. توسط این متد میتوانید تگ های مورد نظری که دارای خاصیت name هستند را انتخاب کرد. برای مثال در زیر ما عناصری که دارای خاصیت name با مقدار foo هستند را انتخاب میکنیم.

<div name="foo"></div>
<input name="foo" type="text" size="20">
var myObj = document.getElementsByName("foo");

در کد بالا هر دو عنصر انتخاب میشوند.

انتخاب عناصر بر اساس کدهای CSS

توسط متد querySelectorAll میتوان تمام کارهای بالا را انجام داد. همچنین میتوان مانند دستورات CSS به انتخاب عناصر پرداخت. البته تمام دستورات CSS پشتیبانی نمیشوند.

var myObj = document.querySelectorAll("body input[type=text]");
myObj[0].style.color = "#b2b";

اگر میدانید که میتوانید به جای querySelectorAll از متدهای گفته شده استفاده کرد از همان ها استفاده کنید, زیرا سرعت اجرای آن متدها بالاتر است.

 

  • محمد می‌گه:

    سلام دوست عزیز
    مطلبت خیلی خوب و مفید بود
    فقط یه سوال داشتم…
    var myObj = document.getElementsByClassName(“foo”);
    myObj[0].style.color = “#b2b”;
    میشه کاری کرد که تغییرات به جای اینکه فقط روی اولین کلاس یا کلاسی که شماره ی آرایه ی اون رو میدیم اعمال نشه و روی همه ی تگ ها این اتفاق بیوفته؟؟؟

  • mahdikhanzadi می‌گه:

    سلام فونت سایت شما کلمه ی “میگه” در بالای کادر نظرات رو بد نشون میده یعنی حرف “ی” رو بد نشون میده البته من ویندوز 8.1 دارم شاید از ویندوز باشه .
    راستی یه سایت در رابطه با یوزر انترفیس ویندوز 8 برای طراحی سایت هست که خیلی توی طراحی های قالب هایی که ساختم ازش استفاده کردم یه نگاه بندازید بد نیست اینم لینکش
    http://metroui.org.ua
    راستی کاش میشد که به عضو هایی که میگیرید اجازه بدید که پست بزارن برای افزایش مطالب سایت خوبه

  • حسینی می‌گه:

    نگاه کنید :
    http://uploadtak.com/images/g3645_554.png

    چرا فونت اینطوری نمایش داده میشه ولی اگه مستقیما روی سیستم نصب شده باشه با لبه های صاف و خوانا نمایش داده میشه!؟

  • tormahiri می‌گه:

    thanks amazing work,keps up


  • نظرات این مطلب بسته است.