روش انتخاب عناصر DOM HTML querySelector()

تعریف و استفاده

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

توجه:

querySelector() این روش فقط عنصر اول که با انتخاب‌گر مشخص شده تطبیق دارد را برمی‌گرداند. برای بازگشت همه تطبیقات، لطفاً از مетод querySelectorAll().

لطفاً به

منوی راهنما:

ویژگی classList

ویژگی className

مетод querySelectorAll()

مетод getElementsByTagName()

مетод getElementsByClassName()

موضوع Style در HTML DOM

تدریس:

زبان CSS

انتخابگر CSS

دستورالعمل انتخابگر CSS

مثال

مثال 1

تغییر متن اولین فرزند <div> با class="example":

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

به طور مستقیم امتحان کنید

مثال‌های بیشتری در پایین صفحه ارائه شده است.

نحوه استفاده

element.querySelector(CSSselectors)

پارامترها

پارامترها توضیح
CSSselectors

ضروری. رشته. یک یا چند انتخاب‌گر CSS برای تطبیق عناصر مشخص می‌کند.

selectorهای CSS برای انتخاب عناصر HTML بر اساس id، class، نوع، ویژگی، مقدار ویژگی و غیره استفاده می‌شوند.

برای انتخاب‌گرهای چندگانه، هر انتخاب‌گر را با کاما جدا کنید.

عنصر بازگشتی بستگی به عنصری دارد که اولین بار در مستند پیدا می‌شود (لطفاً به "مثال‌های بیشتر" زیر مراجعه کنید).

توضیحات:برای لیست کامل انتخاب‌گرهای CSS، لطفاً به دستورالعمل انتخابگر CSS.

جزئیات فنی

مقدار بازگشتی:

اولین عنصر که با انتخاب‌گر CSS تطبیق دارد را برمی‌گرداند.

اگر هیچ تطبیقی پیدا نشود، null را برمی‌گرداند.

اگر انتخاب‌گر مشخص شده معتبر نباشد، استثنا SYNTAX_ERR را پرتاب می‌کند.
نسخه DOM: selectors Level 1 Element Object

مثال‌های بیشتر

مثال 2

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

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

به طور مستقیم امتحان کنید

مثال 3

تغییر متن اولین عناصر <p> با class="example" در عناصر <div>:

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

به طور مستقیم امتحان کنید

مثال 4

تغییر متن عناصر <div> با id="demo":

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

به طور مستقیم امتحان کنید

مثال 5

برای افزودن حاشیه قرمز به اولین عنصر <a> با تنظیم ویژگی target در داخل عناصر <div>، استفاده کنید:

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

به طور مستقیم امتحان کنید

مثال 6

این مثال نحوه کارکرد انتخاب‌گرهای چندگانه را نشان می‌دهد.

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

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

<div id="myDIV">
  <h2>عنصر h2</h2>
  <h3>عنصر h3</h3>
</div>
var x = document.getElementById("myDIV");
x.querySelector("h2, h3").style.backgroundColor = "red";

به طور مستقیم امتحان کنید

مثال 7

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

<div id="myDIV">
  <h3>عنصر h3</h3>
  <h2>عنصر h2</h2>
</div>
var x = document.getElementById("myDIV");
x.querySelector("h2, h3").style.backgroundColor = "red";

به طور مستقیم امتحان کنید

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

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

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 8.0 3.5 3.2 10.0

صفحات مرتبط

آموزش CSS:انتخابگر CSS

دستورالعمل CSS:دستورالعمل انتخابگر CSS

آموزش JavaScript:لیست Node List HTML DOM JavaScript

دستورالعمل JavaScript:document.querySelector()

دستورالعمل JavaScript:element.querySelectorAll()

دستورالعمل HTML DOM:document.querySelectorAll()