بررسی DOM در جاوااسکریپت، آموزش متد querySelector

خب اصلا DOM یعنی چی؟ کلمه DOM مخفف ( Document Object Model ) یا خودمونی تر ( مدل شئ صفحه یا سند ) است، حالا منظورش از این کلمه چیه؟

میگه آقا وقتی یک صفحه در مرورگر لود میشه و میاد بالا، مرورگر از اون صفحه یک مدل شئ درست می‌کنه که در نهایت و بطور کلی ما می‌تونیم از طریق همین مدل شئ ، به عناصر موجود در صفحه دسترسی پیدا کنیم و عناصر رو تغییر یا حذف و یا اضافه کنیم.

پس درکل و در یه کلام DOM یعنی دسترسی داشتن به صفحه و تغییر دادن عناصر ( منظور از عناصر همون تگ ها عه) موجود در صفحه، مثلا می‌تونیم کاری کنیم که وقتی بروی دکمه ای کلیک شد صفت src تگ img عوض شه ( همین یعنی تغییر تصویر موجود در صفحه ) یا مثلا کاری کنیم که با کلیک بروی یه دکمه رنگ صفحه عوض شه و..

پس اینجوری میتونیم بگیم که DOM یعنی :

  • تغییر عناصر (element) یا ( تگ‌های ) موجود در صفحه
  • تغییر صفت (property) تگ‌های موجود در صفحه
  • ایجاد استایل ( CSS ) به تگ‌های موجود در صفحه
  • ایجاد تگ جدید در صفحه
  • ایجاد صفت جدید در تگ‌های موجود در صفحه
  • تغییر رویداد فعلی موجود در صفحه
  • ایجاد رویداد جدید در صفحه



نحوه انتخاب عناصر از صفحه در جاوا اسکریپت

خب ما در بالا اشاره کردیم که DOM یعنی بطور کلی ، نحوه دسترسی به عناصر موجود در صفحه و تغییر ( حذف یا اضافه یا ویرایش ) دادن عناصر است.

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

  • انتخاب از طریق ID
  • انتخاب از طریق Class
  • انتخاب از طریق نام تگ
  • انتخاب از طریق انتخابگرهای CSS
کمی قبلتر در جلسات قبلی بررسی انتخابگرها (Selectors) در جاوااسکریپت باهمدیگه کار کردیم، در صورت تمایل می‌تونید اون آموزش رو مشاهده نمایید چون با این جلسه که الان می‌خوایم کارش کنیم یکی هست و فرقی نداره.


با استفاده از متد ()querySelector می‌تونیم به عناصر ( تگ‌های ) موجود در صفحه دسترسی پیدا نماییم، در واقع همانند یک انتخابگر عمل می‌کند و میشه به راحتی تگ‌ها، کلاس‌ها ، IDها ، صفت‌ها و.. رو از صفحه انتخاب کرد.

اگه زبان CSS رو دنبال کرده باشید خب می‌دونید که ما روش‌های مختلفی داریم برای انتخاب عناصر از صفحه، که به این روش‌ها میگیم انتخابگرها ( Selectors ) حال از همین انتخابگرها ما می‌تونیم در این متد استفاده نماییم.

یعنی مثلا من می‌خوام فلان تگ با کلاس test رو انتخاب کنم، خب ما تو CSS چجوری اینکارو می‌کنیم؟! خب بله در CSS به اینصورت می‌نویسیم :


.test {
  //دستورات CSS  در اینجا
}

حال به همین صورت هم می‌تونیم در متد querySelector استفاده نماییم و عناصر رو از صفحه انتخاب نماییم.

توجه داشته باشید که querySelector همیشه فقط اولین عنصر رو از صفحه انتخاب می‌کنه، یعنی اگه مثلا 10 تا کلاس تست داشتیم، اون اولین کلاس رو انتخاب می‌کنه و بقیه رو کاری نداره، حال اگه بخوایم انتخاب رو از بین تمامی عناصر انجام بدیم باید از متد ()querySelectorAll استفاده نماییم.


مثال از این متد

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

مثال شماره ۱ : انتخاب تگ H2 که دارای کلاس ( Class ) test می باشد

<body>

<h2 class=&quottest&quot>صفحه من در ویرگول</h2>



 let MyTag;
 MyTag = document.querySelector(&quoth2.test&quot);
 MyTag.style.color = &quotblue"



</body>


مثال شماره ۲ : انتخاب تگ P که دارای آی دی ( شناسه یا ID ) test می باشد.

<body>

<p id=&quottest&quot>صفحه من در ویرگول</p>



 let MyTag;
 MyTag = document.querySelector(&quotp#test&quot);
 MyTag.style.color = &quotblue"



</body>


مثال شماره ۳ : انتخاب تگ P که دارای کلاس ( Class ) test می باشد و دوباره همین تگ P خودش درون تگ DIV قرار داره.

<body>

<div>
 <p class=&quottest&quot>صفحه من در ویرگول</p>
</div>



 let MyTag;
MyTag = document.querySelector(&quotdiv p.test&quot);
MyTag.style.color = &quotblue"



</body>


مثال شماره ۴ : چندین کلاس با نام یکسان داریم، ولی خب گفتیم این متد، فقط اولین رو برمیگردونه.

<body>

<p class=&quottest&quot>صفحه من در ویرگول</p>
<p class=&quottest&quot>صفحه من در ویرگول</p>
<p class=&quottest&quot>صفحه من در ویرگول</p>
<p class=&quottest&quot>صفحه من در ویرگول</p>



 let MyTag;
 MyTag = document.querySelector(&quotp.test&quot);
 MyTag.style.color = &quotblue"



</body>


مثال شماره ۵ : استفاده از انتخابگر صفت ( می‌خوایم عکسی که مقدار صفت alt آن برابر است با ” Hossein ” انتخاب نماییم )

<body>

<p><img src=&quothttps://files.virgool.io/upload/users/200359/avatar/dazZ9K.jpeg?x-img=v1/resize,h_120,w_120/optimize,q_100&quot alt=&quotHossein&quot></p>



 let MyTag;
 MyTag = document.querySelector(&quotimg[alt='Hossein ']&quot);
 MyTag.style.border = &quot3px solid red"



</body>


منبع: developer.mozilla.org