querySelector در جاوا اسکریپت چیست؟
تابع querySelector در جاوااسکریپت یکی از متدهای موجود در شیء Document Object Model (DOM) است که برای یافتن یک المان در صفحه HTML با استفاده از یک نمایشگر CSS (مانند یک انتخابگر) استفاده می‌شود. در واقع، با استفاده از این متد می‌توان به راحتی تگ‌ها، کلاس‌ها، آی دی‌ها، صفت‌ها و.. را از صفحه انتخاب کرد.
متد querySelector تنها می‌تواند یه تگ انتخاب کند (یعنی اگر ۳ کلاس test باشد، فقط اولین گزینه را انتخاب می‌کند) ولی متد querySelectorAll می‌تواند بیش از ۱تگ را انتخاب کند.
اگر شما هم جزء توسعه دهندگان CSS باشید، حتما مطلع هستید که روش‌های مختلفی برای انتخاب تگ ها از صفحه وجود دارد که به این روش‌ها (Selectors و یا انتخابگرها) گفته می‌شود. با استفاده از این انتخابگرها، می‌توان از این متد کمک گرفت.
سینتکس استفاده از این متد به شکل زیر است.
querySelector(selectors)
در اینجا نحوه استفاده از querySelector مشخص شده است.
let element = parentNode.querySelector(selector);
در کد بالا، selector یک انتخابگر CSS یا گروهی از انتخابگرها می‌باشد. اگر انتخابگر CSS معتبر نباشد، باعث بازگرداندن خطای نحوی می‌شود. اگر هیچ عنصری با انتخابگر تطابق نداشته باشد، querySelector مقدار null را بر می‌گرداند. می‌توان از querySelector روی هر شی Element دیگری هم استفاده کرد.
متد مشابه دیگر، روش querySelectorAll است. این متد تمام عناصری را انتخاب می‌کند که با یک انتخابگر CSS یا گروهی از انتخابگرها مطابقت دارند و سینتکس استفاده از آن به شکل زیر است.
let elementList = parentNode.querySelectorAll(selector);
این متد نوعی «NodeList» ثابت از عناصر را بر می‌گرداند. اگر هیچ عنصری شباهت نداشته باشد، NodeList خالی بازگردانده خواهد شد. برای تبدیل NodeList به آرایه، می‌توان از Array.from() مانند شکل زیر استفاده کرد.
let nodeList = document.querySelectorAll(selector);
let elements = Array.from(nodeList);
مطلب پیشنهادی: بهترین فریم ورک‌های جاوااسکریپت
انتخابگرهای اساسی
برای اینکه querySelector در جاوا اسکریپت را بهتر درک کنید، ابتدا باید با آن آشنا شوید.
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>querySelector() Demo</title>
</head>
<body>
<header>
<div id=”logo”>
<img src=”img/logo.jpg” alt=”Logo” id=”logo”>
</div>
<nav class=”primary-nav”>
<ul>
<li class=”menu-item current”><a href=”#home”>Home</a></li>
<li class=”menu-item”><a href=”#services”>Services</a></li>
<li class=”menu-item”><a href=”#about”>About</a></li>
<li class=”menu-item”><a href=”#contact”>Contact</a></li>
</ul>
</nav>
</header>
<main>
<h1>Welcome to the JS Dev Agency</h1><div class=”container”>
<section class=”section-a”>
<h2>UI/UX</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem placeat, atque accusamus voluptas
laudantium facilis iure adipisci ab veritatis eos neque culpa id nostrum tempora tempore minima.
Adipisci, obcaecati repellat.</p>
<button>Read More</button>
</section>
<section class=”section-b”>
<h2>PWA Development</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni fugiat similique illo nobis quibusdam
commodi aspernatur, tempora doloribus quod, consectetur deserunt, facilis natus optio. Iure
provident labore nihil in earum.</p>
<button>Read More</button>
</section>
<section class=”section-c”>
<h2>Mobile App Dev</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi eos culpa laudantium consequatur ea!
Quibusdam, iure obcaecati. Adipisci deserunt, alias repellat eligendi odit labore! Fugit iste sit
laborum debitis eos?</p>
<button>Read More</button>
</section>
</div>
</main>
<script src=”js/main.js”></script>
</body>
</html>
1. انتخابگر جهانی
انتخابگر جهانی که با * نمایش داده می‌شود، با تمام عناصر صفحه وب، صرف‌نظر از نوع آن‌ها تطابق دارد و سینتکس آن به شکل زیر است.
let element = document.querySelector(‘*’);
برای انتخاب تمام عناصر سند، از دستور زیر می‌توان استفاده کرد.
let elements = document.querySelectorAll(‘*’);
2. انتخابگر نوع
برای هدف قرار دادن عناصر با نام گره HTML آن‌ها، انتخابگر نوع مورد استفاده قرار می‌گیرد. برای مثال، h1 همه عناصر h1 را انتخاب می‌کند.
let firstHeading = document.querySelector(‘h1’);
و برای پیدا کردن تمام عناصر h2 باید به شکل زیر پیش بروید.
let heading2 = document.querySelectorAll(‘h2’);
3. انتخابگر کلاس
برای مکان‌یابی عناصر با کلاس CSS خاص، از انتخابگر کلاس، بعد از درج علامت نقطه استفاده می‌شود. سینتکس آن به این صورت است.
let note = document.querySelector(‘.menu-item’);
4. انتخابگر شناسه
برای انتخاب عنصر با ویژگی ID آن، از سینتکس انتخابگر شناسه استفاده می‌شود، دقیقا مانند سینتکس زیر.
let logo = document.querySelector(‘#logo’);
5. انتخابگر ویژگی
برای پیدا کردن عنصر با ویژگی autoplay می‌توانید از کد زیر استفاده کنید.
let autoplay = document.querySelector(‘[autoplay]’);
همچنین، برای پیدا کردن تمام عناصر با ویژگی autoplay باید کد زیر را در نظر داشته باشید.
let autoplays = document.querySelectorAll(‘[autoplay]’);
مطلب پیشنهادی: برنامه نویسی با چت جی پی تی
document.querySelector در جاوا اسکریپت چیست؟
document.querySelector یک روش در جاوا اسکریپت است که برای انتخاب عناصر در سند HTML به کار می‌رود. این روش از CSS Selectors برای یافتن عناصر مطابق با معیارهای مشخص شده استفاده می‌کند.
مزایای استفاده از document.querySelector:
سرعت: document.querySelector سریعتر از سایر روش‌های انتخاب عنصر مانند getElementById و getElementsByTagName است.
دقت: document.querySelector به شما امکان می‌دهد عناصر را با استفاده از طیف گسترده‌ای از CSS Selectors انتخاب کنید، که این امر انتخاب دقیق‌تر عناصر را به ارمغان می‌آورد.
سهولت استفاده: استفاده از document.querySelector ساده است و همین موضوع باعث استفاده توسط توسعه دهندگان زیادی شده است.
چند نمونه از نحوه استفاده document.querySelector
انتخاب عنصری با شناسه خاص:
const element = document.querySelector(‘#myElement’);
انتخاب اولین عنصر از یک نوع خاص:
const element = document.querySelector(‘p’);
انتخاب تمام عناصر با کلاس خاص:
const elements = document.querySelectorAll(‘.myClass’);
مطلب پیشنهادی: برنامه نویسی شی گرا چیست؟
سخن نهایی
querySelector در جاوااسکریپت یک متد است که برای انتخاب یک المان DOM در صفحه وب با استفاده از یک سلکتور CSS استفاده می‌شود. این متد با استفاده از سلکتور CSS مشخص شده، اولین المان مطابق با آن را در صفحه انتخاب می‌کند و به عنوان یک شیء DOM بازمی‌گرداند.
.svg)
