• 7Learn Discount
  • illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید تا کنون 6334 نفر در 14 دوره آموزشی سون لرن ثبت نام کرده اند !

HTML5 "querySelector" API: جستجوی آسان‌تر عناصر در درخت DOM

1 2487 ۱۹ شهریور ۹۳

به نام خدا

با سلام خدمت دوستان عزیز سون لرنی.

HTML5 با ورود خود به دنیای وب، API (رابط برنامه کاربردی)های زیادی با خود به ارمغان آورد. میتوان گفت بعد از ورود HTML5، کدنویسان بسیاری برنامه های کوچکی را که به کمک کتابخانه های JavaScript(برای مثال jQuery) مینوشتند، از این پس با جاوااسکریپت خالص(pure javascript) مینویسند. یکی از این API ها querySelector است.

querySelector API

از querySelector برای جستجوی راحت و پیشرفته تر بین عناصر درخت DOM استفاده میکنند. تا قبل از آن برای جستجوی عناصر در درخت DOM، از متد های getElementById، getElementsByTagName، getElementsByClassName در شیء document و element استفاده میشد.

نحوه ی استفاده:

میتوانید از تمامی سلکتورهای CSS و CSS3 در پارامتر CSS selector استفاده کنید. متد querySelector تنها اولین عنصر(Node) را برمیگرداند ولی متد querySelectorAll آرایه ای از تمامی عناصر انتخابی برمیگرداند.

متد querySelector در صورت  پیدا نکردن عنصری، مقدار null، و متد querySelectorAll یک آرایه ی خالی را برمیگرداند.

میزان پشتیبانی مرورگر ها از این API به صورت زیر است:

querySelector-support

برای مثال به کدهای زیر توجه کنید.

همونطور که کدهارو دیدید ابتدا عناصر رو درون متغیر هایی ذخیره کردیم و سپس عملیاتی رو بر روی اونها انجام دادیم.

نکته : خاصیت outerHTML یک عنصر، تگ HTML آن عنصر را به صورت String برمیگرداند.

همونطور که دیدید تقریبا میشه گفت که این API میتونه جایگزین مناسبی برای متد jQuery یا همون $ باشه.

querySelector

موفق باشید.

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها یک نظر ارسال شده است.

  • ‏‏

    سلام.
    خاصیت outerHTML بعضی وقتها درست پشتیبانی نمیشه.
    بهتره المنت های مد نظرمون رو به اون append ،pre کنیم.

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram