فرادرسمتد querySelector در جاوا اسکریپت چیست و چه کاربردی دارد؟ – به زبان ساده
querySelector در جاوا اسکریپت متدی قدرتمند است که برای انتخاب و دست‌کاری عناصر در صفحه وب استفاده می‌شود. این متد به توسعه‌دهندگان اجازه می‌دهد تا عناصر خاص HTML را با استفاده از انتخابگرهای CSS هدف قرار دهند. با استفاده از querySelector در زبان برنامه نویسی جاوا اسکریپت، می‌توان به راحتی به عناصر با شناسه‌ها، کلاس‌ها یا سایر ویژگی‌ها دسترسی داشت و کارهای دست‌کاری «DOM» را ساده کرد. این ابزار برای واکشی داده‌ها یا به‌روزرسانی رابط کاربری ابزاری مناسب برای توسعه‌دهندگان وب است.
در این مطلب از «مجله فرادرس» اطلاعات نسبتاً مطلوبی از querySelector در جاوا اسکریپت به همراه مثال‌های عملی ارائه خواهیم کرد. در این مطلب، ما نحوه استفاده از querySelector و querySelectorAll در جاوا اسکریپت را برای یافتن عناصر بر اساس انتخابگرهای CSS یاد خواهیم گرفت. ما در این مطلب سعی می‌کنیم که بیشتر جنبه‌های کار با querySelector در Javascript را پوشش دهیم و در کنار آن به مفهوم document.querySelector نیز بپردازیم.
querySelector در جاوا اسکریپت چیست؟
متد querySelector در جاوا اسکریپت بخشی از رابط Element است. این متد برای یافتن اولین عنصر در صفحه وب که با یک یا چند انتخابگر CSS مطابقت دارد، استفاده می‌شود.
سینتکس استفاده از این متد به صورت زیر است:
1querySelector(selectors)در اینجا نحوه استفاده از querySelector آمده است:
1let element = parentNode.querySelector(selector);در کد فوق، selector یک انتخابگر CSS یا گروهی از انتخابگرها است. اگر انتخابگر CSS معتبر نباشد، باعث بازگرداندن خطای نحوی می‌شود. اگر هیچ عنصری با انتخابگر مطابقت نداشته باشد، querySelector مقدار null را بازمیگرداند. می‌توان از querySelector روی شی سند یا هر شی Element دیگری استفاده کرد.
متد مشابه دیگری متد querySelectorAll است. این متد تمام عناصری را انتخاب می‌کند که با یک انتخابگر CSS یا گروهی از انتخابگرها مطابقت دارند و سینتکس استفاده از آن به صورت زیر است:
1let elementList = parentNode.querySelectorAll(selector);متد فوق نوعی «NodeList» ثابت از عناصر را بازمیگرداند. اگر هیچ عنصری مطابقت نداشته باشد، NodeList خالی بازگردانده خواهد شد. باید به این نکته توجه داشت که NodeList مانند نوعی آرایه است اما دقیقاً با آن یکسان نیست. با این حال، در مرورگرهای وب مدرن، می‌توان با استفاده از for...of یا ForEach در جاوا اسکریپت آن را پیمایش کرد. برای تبدیل NodeList به آرایه، می‌توان از Array.from() مانند زیر استفاده کرد:
1let nodeList = document.querySelectorAll(selector);
2let elements = Array.from(nodeList);انتخابگرهای اساسی
برای درک بهتر نحوه کار querySelector در جاوا اسکریپت ابتدا باید انتخابگرها را به خوبی بشناسیم. برای این هدف، در ادامه این مطلب از مجله فرادرس، قطعه کد زیر مد نظر است:
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <title>querySelector() Demo</title>
5</head>
6<body>
7 <header>
8 <div id="logo">
9 <img src="img/logo.jpg" alt="Logo" id="logo">
10 </div>
11 <nav class="primary-nav">
12 <ul>
13 <li class="menu-item current"><a href="#home">Home</a></li>
14 <li class="menu-item"><a href="#services">Services</a></li>
15 <li class="menu-item"><a href="#about">About</a></li>
16 <li class="menu-item"><a href="#contact">Contact</a></li>
17 </ul>
18 </nav>
19 </header>
20 <main>
21 <h1>Welcome to the JS Dev Agency</h1>
22
23 <div class="container">
24 <section class="section-a">
25 <h2>UI/UX</h2>
26 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem placeat, atque accusamus voluptas
27 laudantium facilis iure adipisci ab veritatis eos neque culpa id nostrum tempora tempore minima.
28 Adipisci, obcaecati repellat.</p>
29 <button>Read More</button>
30 </section>
31 <section class="section-b">
32 <h2>PWA Development</h2>
33 <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni fugiat similique illo nobis quibusdam
34 commodi aspernatur, tempora doloribus quod, consectetur deserunt, facilis natus optio. Iure
35 provident labore nihil in earum.</p>
36 <button>Read More</button>
37 </section>
38 <section class="section-c">
39 <h2>Mobile App Dev</h2>
40 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi eos culpa laudantium consequatur ea!
41 Quibusdam, iure obcaecati. Adipisci deserunt, alias repellat eligendi odit labore! Fugit iste sit
42 laborum debitis eos?</p>
43 <button>Read More</button>
44 </section>
45 </div>
46 </main>
47 <script src="js/main.js"></script>
48</body>
49</html>۱. انتخابگر جهانی
انتخابگر جهانی که با * نشان داده می‌شود، با تمام عناصر صفحه وب، صرف‌نظر از نوع آن‌ها مطابقت دارد و سینتکس آن به صورت زیر است:
1let element = document.querySelector('*');برای انتخاب تمام عناصر سند، می‌توان از دستور زیر استفاده کرد:
1let elements = document.querySelectorAll('*');۲. انتخابگر نوع
برای هدف قرار دادن عناصر با نام گره HTML آن‌ها، از انتخابگر نوع استفاده می‌شود. به عنوان مثال، h1 همه عناصر h1 را انتخاب می‌کند:
1let firstHeading = document.querySelector('h1');و برای پیدا کردن تمام عناصر h2 باید به صورت زیر عمل کنیم:
1let heading2 = document.querySelectorAll('h2');۳. انتخابگر کلاس
برای مکان‌یابی عناصر با کلاس CSS خاص، از انتخابگر کلاس، بعد از درج علامت نقطه استفاده می‌شود که سینتکس آن به صورت زیر است:
1let note = document.querySelector('.menu-item');به عنوان مثال، برای پیدا کردن تمام عناصر با کلاس menu باید به صورت زیر عمل کرد:
1let notes = document.querySelectorAll('.menu-item');۴. انتخابگر شناسه
برای انتخاب عنصر با ویژگی ID آن، از سینتکس انتخابگر شناسه استفاده می‌شود که قبل از آن «نماد هش» (#) آورده می‌شود. طبق سینتکس زیر:
1let logo = document.querySelector('#logo');از آنجایی که شناسه‌ها باید منحصربه‌فرد باشند، querySelectorAll معمولاً ضروری نیست.
۵. انتخابگر ویژگی
برای هدف قرار دادن عناصر با ویژگی خاص، می‌توان از انتخابگر ویژگی‌های مختلف استفاده کرد. به عنوان مثال، برای پیدا کردن عنصر با ویژگی autoplay می‌توان مانند کد زیر عمل کرد:
1let autoplay = document.querySelector('[autoplay]');و برای پیدا کردن تمام عناصر با ویژگی autoplay باید به صورت زیر عمل کرد:
1let autoplays = document.querySelectorAll('[autoplay]');انتخابگرهای گروه بندی
انتخابگرهای گروه‌بندی به کاربر این امکان را می‌دهد که سبک‌ها را اعمال کرده یا عملیات را روی چندین عنصر به طور هم‌زمان انجام دهد. می‌توان انتخابگرها را با جدا کردن آن‌ها با کاما گروه‌بندی کرد. این بدان معناست که هر عنصری که با هر یک از انتخابگرهای گروه مطابقت داشته باشد، انتخاب خواهد شد.
1selector, selector, ...به عنوان مثال، برای انتخاب همه عناصر div و p در صفحه وب، می‌توان طبق قطعه کد زیر عمل کرد:
1let elements = document.querySelectorAll('div, p');قطعه کد بالا همه عناصر div و p را انتخاب می‌کند و کاربر را قادر می‌سازد که به طور جمعی با آن‌ها کار کند.
ترکیب کننده ها
ترکیب‌کننده‌ها نمادهای خاصی در انتخابگرهای CSS هستند که به کاربر کمک می‌کنند عناصر خاصی را بر اساس رابطه آن‌ها با عناصر دیگر هدف قرار دهند.
۱. ترکیب نسل
ترکیب نسل برای انتخاب عناصری استفاده می‌شود که از زیر بخش‌ها یا فرزندان عنصر دیگری هستند. به عنوان مثال، "p a" با تمام عناصر a در عناصر p مطابقت دارد. مثال زیر برای بیان این هدف است:
1let links = document.querySelector('p a');۲. ترکیب‌کننده فرزند
ترکیب‌کننده فرزند با علامت > عناصری را انتخاب می‌کند که فرزندان مستقیم عنصری مشخص هستند. به عنوان مثال، ul > li تمام عناصر li را که فرزندان مستقیم عناصر ul هستند انتخاب می‌کند. مثال زیر برای بیان این مفهوم است:
1let listItems = document.querySelectorAll('ul > li');همچنین برای انتخاب عناصر li مستقیماً در عنصر ul با کلاس nav باید به صورت زیر عمل کرد:
1let listItems = document.querySelectorAll('ul.nav > li');۳. ترکیب‌کننده خواهر و برادر عمومی
ترکیب‌کننده خواهر و برادر با علامت ~ ، خواهر و برادرهایی را انتخاب می‌کند که والد مشابهی دارند. به عنوان مثال، p ~ a با تمام عناصر a که از عناصر p پیروی می‌کنند، مطابقت دارد. مانند مثال زیر:
1let links = document.querySelectorAll('p ~ a');۴. ترکیب‌کننده خواهر و برادر مجاور:
ترکیب‌کننده خواهر و برادر مجاور با علامت مثبت + ، عناصر خواهر و برادر مجاور را انتخاب می‌کند. به عنوان مثال، h1 + a با تمام عناصری که مستقیماً از عناصر h1 پیروی می‌کنند مطابقت دارد. مثال زیر برای بیان این مفهوم است:
1let links = document.querySelectorAll('h1 + a');همچنین برای انتخاب اولین عنصر a که مستقیماً از عنصر h1 پیروی می‌کند باید به صورت زیر عمل کرد:
1let links = document.querySelector('h1 + a');۵. شبه کلاس و شبه عناصر
شبه کلاس‌ها انتخابگرهایی در CSS هستند که عناصر را بر اساس وضعیت یا موقعیت آن‌ها در سند هدف قرار می‌دهند. آن‌ها با علامت دونقطه ( : ) و نوعی کلمه کلیدی نشان داده می‌شوند. به عنوان مثال، :nth-child(2) دومین عنصر li را در لیست انتخاب می‌کند:
1let listItem = document.querySelectorAll('li:nth-child(2)');شبه عناصر در CSS عناصر مجازی را نشان می‌دهند که بخشی از ساختار سند واقعی HTML نیستند. آن‌ها با دونقطه ( :: ) نشان داده می‌شوند. به عنوان مثال، ::first-line خط اول متن را در عناصر p هدف قرار می‌دهد:
1let links = document.querySelector('p::first-line');document.querySelector در جاوا اسکریپت چیست؟
«document.querySelector» نوعی متد جاوا اسکریپت است که با استفاده از انتخاب‌گری مشخص یا گروهی از انتخابگرها به مکان‌یابی عنصر در سند کمک می‌کند. این متد در اصل اولین عنصری را که با انتخابگر مطابقت دارد بازمیگرداند. اگر مطابقت پیدا نشد، مقدار «null» بازگردانده خواهد شد. این متد معمولاً برای انتخاب عنصری از صفحه وب، مشابه «getElementById» اما با انعطاف‌پذیری بیشتر استفاده می‌شود.
به عنوان مثال، کد زیر اولین عنصر p را در سند انتخاب می‌کند:
1let firstParagraph = document.querySelector('p');پارامتر document.querySelector چیست؟
پارامتر برای document.querySelector رشتهای به نام «Selectors» است که شامل یک یا چند انتخابگر برای پیدا کردن مطابقت است. این انتخابگرها باید به سینتکس معتبر CSS پایبند باشند. در غیر این صورت، خطای SyntaxError رخ خواهد داد. متد document.querySelecto نوعی شی Element را بازمیگرداند که نشاندهنده اولین عنصر در سند است که با انتخابگرهای CSS مشخص شده مطابقت دارد. اگر مطابقت پیدا نشد، همانطور که گفته شده null بازخواهد گشت. همچنین برای یافتن فهرستی از تمام عناصر منطبق با انتخابگرها، بهجای آن «querySelectorAll» باید استفاده شود. در صورت نامعتبر بودن سینتکس در انتخابگرهای ارائهشده، نوعی خطای «SyntaxError DOMException» اتفاق خواهد افتاد.
نکات استفاده از document.querySelector
در این بخش چند نکته ساده و مبتدی برای استفاده مؤثر از آورده querySelector در جاوا اسکریپت ارائه شده است. هنگام استفاده از document.querySelector ، اگر چندین عنصر دارای یک شناسه واحد در HTML باشند، متد اولین عنصر را با آن شناسه بازمیگرداند. همچنین طبق مستندات و مشخصات «Selectors API»، شبه عناصر CSS به وسیله querySelector() قابل بازگردانی نیستند.
کاراکترهای خاص
برای تطبیق شناسه‌ها یا انتخاب‌کننده‌هایی که از سینتکس استاندارد CSS پیروی نمی‌کنند (مانند استفاده از دو نقطه یا فاصله‌های نامناسب)، باید از آن کاراکترها با بک اسلش ( \ ) گذر کرد. از آنجایی که بک اسلش نیز نوعی کاراکتر خاص در جاوا اسکریپت است، هنگام استفاده از آن در رشته واقعی باید دو بار آن را عنوان کرد. برای نشان دادن این مفهوم قطعه کد زیر مدنظر است:
1<div id="foo\bar"></div>
2<div id="foo:bar"></div>
3
4<script>
5 console.log("#foo\bar"); // "#fooar" (\b is the backspace control character)
6 document.querySelector("#foo\bar"); // Does not match anything
7
8 console.log("#foo\\bar"); // "#foo\bar"
9 console.log("#foo\\\\bar"); // "#foo\\bar"
10 document.querySelector("#foo\\\\bar"); // Match the first div
11
12 document.querySelector("#foo:bar"); // Does not match anything
13 document.querySelector("#foo\\:bar"); // Match the second div
14</script>همچنین قطعه کد زیر مثالی از یافتن اولین عنصر با کلاس خاصی است:
1const element = document.querySelector(".myclass");قطعه کد فوق اولین عنصر در سند را که دارای کلاس myclass است، بازیابی می‌کند.
انتخابگرهای پیچیده
انتخابگرها در جاوا اسکریپت می‌توانند بسیار قدرتمند و پیچیده باشند. به عنوان مثال، قطعه کد زیر مدنظر است:
1const element = document.querySelector("div.user-panel.main input[name='login']");کاری که کد بالا انجام می‌دهد پیدا کردن اولین عنصر input با نام login است که در داخل div با کلاس user-panel main قرار دارد. بنابراین، اگر قطعه HTML مانند کد زیر داشته باشیم:
1<div class="user-panel main">
2 <input name="login">
3</div>کد جاوا اسکریپت بالا عنصر input را برای ما پیدا می‌کند. این رویکرد راهی مفید برای هدف قرار دادن عناصر خاص در ساختار صفحه وب است.
قابلیت عدم انتخاب
همچنین می‌توان از قابلیت عدم انتخاب در رشته‌های انتخابگر CSS استفاده کرد که مثال زیر برای بیان این هدف است:
1const element = document.querySelector("div.user-panel:not(.main) input[name='login']");کد بالا نوعی عنصر ورودی با والد div را انتخاب می‌کند که دارای کلاس user-panel است اما کلاس main ندارد. این راهی است برای حذف برخی عناصر از انتخاب بر اساس کلاس‌های آن‌ها.
چه مرورگرهایی از قابلیت querySelector در جاوا اسکریپت پشتیبانی می کنند؟
مرورگرهای مختلفی از متد querySelector در جاوا اسکریپت پشتیبانی می‌کنند که در این بخش تفکیک ساده‌ای از سازگاری مرورگرها با متد querySelector در پلتفرم‌های مختلف آورده شده است:
مرورگرهای دسکتاپ:
- گوگل کروم: از نسخه ۱ به بعد
- اج: از نسخه ۱۲ به بعد
- فایرفاکس: از نسخه ۳.۵ به بعد
- اوپرا: از نسخه ۱۰ به بعد
- سافاری: از نسخه ۳.۱ به بعد
مرورگرهای موبایل:
- گوگل کروم اندروید: از نسخه ۱۸ به بعد
- فایرفاکس برای اندروید: از نسخه ۴ به بعد
- اوپرا برای اندروید: از نسخه ۱۰ به بعد
- سافاری در iOS: از نسخه ۲ به بعد
- اینترنت سامسونگ: از نسخه ۱ به بعد
- WebView Android: از نسخه ۴.۴ به بعد
این قابلیت پشتیبانی گسترده نشان می‌دهد که querySelector در Javascript به طور گسترده در مرورگرها و پلتفرم‌های مختلف پشتیبانی می‌شود و آن را به متدی قابل‌اعتماد برای انتخاب عناصر در جاوا اسکریپت تبدیل می‌کند.
سخن پایانی
querySelector در جاوا اسکریپت عنصر اولیه‌ای را که با انتخابگر CSS یا مجموعه‌ای از انتخابگرها مطابقت دارد، تعیین می‌کند. از سوی دیگر، querySelectorAll تمام عناصری را که با انتخابگر CSS یا گروهی از انتخابگرها مطابقت دارند، بازیابی می‌کند. در CSS، انتخابگر عناصری را تعیین می‌کند که قانون خاص CSS برای آن‌ها اعمال می‌شود.
در مطلب فوق از مجله فرادرس مفهوم querySelector در زبان برنامه نویسی جاوا اسکریپت با رویکردی آموزشی مورد بررسی قرار گرفت و در سناریوهای مختلفی از آن استفاده شد. همچنین در این مطلب انواع انتخابگرها، مفهوم document.querySelector و همچنین نکات استفاده از querySelector نیز بیان شدند.
