سبد (0)

متد document.querySelector

مثال (متد document.querySelector)

به دست آوردن اولین عنصر در سند با کلاس example:

document.querySelector(".example");

خودتان امتحان کنید »

در انتهای این صفحه، مثال های بیشتری آورده شده است.

تعریف و کاربرد

متد querySelector()، اولین عنصری که با یک سلکتور css در سند، تطابق یابد را برمی گرداند.

نکته: متد querySelector() تنها اولین عنصری که با سلکتور های مشخص شده تطابق یابد را برمی گرداند. برای برگرداندن تمام تطابق ها می توانید از متد querySelectorAll() استفاده کنید.

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

برای اطلاعات بیشتر در مورد سلکتورهای css می توانید آموزش های CSS Selectors Tutorial و CSS Selectors Reference را ببینید.

پشتیبانی مرورگرها

اعداد داخل جدول زیر نشان دهنده ی اولین ورژن مرورگری است که به طور کاملاز این متد پشتیبانی می کند.

متد     
querySelector() 4.0 8.0 3.5 3.2 10.0

نحوه استفاده

document.querySelector(CSS selectors)

مقادیر پارامترها

پارامترTypeتوضیحات
CSS selectors رشته

ضروری. یک یا چند سلکتور css را برای یافتن عنصر مورد تطابق مشخص می کند. از اینها به جهت یافتن عناصر بر اساس id، یا class یا types یا attributes یا مقدار attributes و ... استفاده می شود.

برای استفاده ی سلکتورهای چندگانه، هر سلکتور را با یک کاما از دیگری جدا کنید. عنصر برگردانده شده بستگی به عنصری دارد که اولین بار در سند پیدا شود.
نکته: برای پیدا کردن یک لیست از تمام سلکتورهای css مقاله ی CSS Selectors Reference را ببینید.

جزئیات تکنیکی

DOM Version: Selectors Level 1 کلیه توابع و خصوصیت های شیء Document در JavaScript
مقدار برگشتی

یک شیء NodeList که مشخص کننده ی اولین عنصری است که بعنوان تطابق با سلکتور css مشخص شده برگردانده شود. در صورتی که هیچ تطابقی یافت نشود، null برگردانده خواهد شد.  در صورتی که سلکتور مشخص شده نامعتبر باشد، یک خطای SYNTAX_ERR به وجود خواهد آمد.
مثال

مثال - خودتان امتحان کنید

مثال (متد document.querySelector)

به دست آوردن اولین عنصر <P> در سند:

document.querySelector("p");

خودتان امتحان کنید »

مثال (متد document.querySelector)

به دست آوردن اولین عنصر <P> در سند با کلاس example:

document.querySelector("p.example");

خودتان امتحان کنید »

مثال (متد document.querySelector)

تغییر دادن متن یک عنصر با "id="demo :

document.querySelector("#demo").innerHTML = "Hello World!";

خودتان امتحان کنید »

مثال (متد document.querySelector)

به دست آوردن اولین عنصر <p>  در سند در صورتی که عنصر والد یک <div> باشد:

document.querySelector("div > p");

خودتان امتحان کنید »

مثال (متد document.querySelector)

به دست آوردن اولین عنصر <a> در سند که یک خصوصیت target را دارا است:

document.querySelector("a[target]");

خودتان امتحان کنید »

مثال (متد document.querySelector)

این مثال یک نسخه ی نمایشی از این است که چطور سلکتورهای چندگانه کار می کنند.

فرض کنید که شما دو عنصر دارید: عنصر <h2> و عنصر <h3>:

کد زیر، یک رنگ پس زمینه را به اولین عنصر <h2> در سند اختصاص می دهد:

<h2>A h2 element</h2>
<h3>A h3 element</h3>

document.querySelector("h2, h3").style.backgroundColor = "red";

خودتان امتحان کنید »

اما در صورتی که عنصر <h3> قبل از عنصر <h2> در سند قرار بگیرد، عنصر <h3> اولین عنصری است که رنگ قرمز پس زمینه را خواهد گرفت:

<h3>A h3 element</h3>
<h2>A h2 element</h2>

document.querySelector("h2, h3").style.backgroundColor = "red";

خودتان امتحان کنید »

آموزش های مرتبط

CSS Tutorial: CSS Selectors

CSS Reference: CSS Selectors Reference

آموزش جاوا اسکریبت: JavaScript HTML DOM Node List

مرجع جاوا اسکریبت: element.querySelector()

HTML DOM Reference: document.querySelectorAll()

مرجع جاوا اسکریبت: element.querySelectorAll()

کلیه توابع و خصوصیت های شیء Document در JavaScript Reference کلیه توابع و خصوصیت های شیء Document در JavaScript

نوشته شده توسط احسان عباسی
بازدید: 12910

در میان شش هزار مطلب آموزشی منتشر شده در بیاموز، جستجو نمایید ...

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین - بانک ملت معرفی بیاموز در شبکه سه