متد element.querySelector

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

تغییر دادن متن اولین عنصر فرزند با کلاس example در یک عنصر <div>:

var x = document.getElementById("myDIV");
x.querySelector(".example").innerHTML = "Hello World!";

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

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

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

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

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

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

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

متد
querySelector()	4.0	8.0	3.5	3.2	10.0

نحوه استفاده

element.querySelector(CSS selectors)

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

پارامتر	Type	توضیحات
CSS selectors	String	ضروری. یک یا چند سلکتور css برای تطابق با عنصر مورد نظر را مشخص می کند. از اینها می توان برای به دست آوردن عناصر اچ تی ام ال بر اساس id و کلاس , نوع عنصر، خصوصیت یا مقدار خصوصیت ها استفاده نمود. برای نوشتن سلکتورهای چندگانه، هر سلکتور را با کاما از یکدیگر جدا کنید. عنصر برگردانده شده بستگی به این دارد که کدام عنصر ابتدا در سند پیدا شود. نکته: برای دیدن یک لیست از تمام سلکتورهای css می توانید مقاله ی CSS Selectors Reference را ببینید.

پارامتر

Type

توضیحات

CSS selectors

String

ضروری. یک یا چند سلکتور css برای تطابق با عنصر مورد نظر را مشخص می کند. از اینها می توان برای به دست آوردن عناصر اچ تی ام ال بر اساس id و کلاس , نوع عنصر، خصوصیت یا مقدار خصوصیت ها استفاده نمود.

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

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

DOM Version:	Selectors Level 1 کلیه توابع و خصوصیت های شیء Element در JavaScript
مقدار برگشتی	عنصر اولی که با یک سلکتور(ها) تطابق یابد. در صورتی که هیچ تطابقی یافت نشود، مقدار null برگشت داده خواهد شد. در صورتی که سلکتور مورد نظر معتبر نباشد عبارت SYNTAX_ERR اتفاق خواهد افتاد.

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

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

تغییر دادن متن اولین عنصر <p> در یک عنصر <div>:

var x = document.getElementById("myDIV");
x.querySelector("p").innerHTML = "Hello World!";

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

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

تغییر دادن متن اولین عنصر <p> با کلاس example در یک عنصر <div>:

var x = document.getElementById("myDIV");
x.querySelector("p.example").innerHTML = "Hello World!";

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

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

تغییر دادن متن یک عنصر با آی دی demo، دریک عنصر <div>:

var x = document.getElementById("myDIV");
x.querySelector("#demo").innerHTML = "Hello World!";

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

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

اضافه کردن یک کادر قرمز به اولین عنصر <a> که دارای یک خصوصیت targetمی باشد و درون یک عنصر <div> قرار دارد:

var x = document.getElementById("myDIV");
x.querySelector("a[target]").style.border = "10px solid red";

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

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

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

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

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

<div id="myDIV">
<h2>A h2 element</h2>
<h3>A h3 element</h3>
</div>

var x = document.getElementById("myDIV");
x.querySelector("h2, h3").style.backgroundColor = "red";

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

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

<div id="myDIV">
<h3>A h3 element</h3>
<h2>A h2 element</h2>
</div>

var x = document.getElementById("myDIV");
x.querySelector("h2, h3").style.backgroundColor = "red";

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