طريقة HTML DOM querySelector ()

مثال

غيّر نص العنصر الفرعي الأول باستخدام class = "example" في عنصر <div>:

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

المزيد من الأمثلة "جربها بنفسك" أدناه.

التعريف والاستخدام

تُرجع طريقة querySelector () أول عنصر فرعي يتطابق مع محدد (محددات) CSS المحدد لعنصر.

ملاحظة: تقوم طريقة querySelector () بإرجاع العنصر الأول الذي يطابق المحددات المحددة فقط. لإرجاع جميع التطابقات ، استخدم طريقة querySelectorAll () بدلاً من ذلك.

لمزيد من المعلومات حول محددات CSS ، تفضل بزيارة البرنامج التعليمي لمحددات CSS ومرجع محددات CSS الخاص بنا .

دعم المتصفح

تحدد الأرقام الواردة في الجدول إصدار المتصفح الأول الذي يدعم الطريقة بالكامل.

Method
querySelector()	4.0	8.0	3.5	3.2	10.0

بناء الجملة

element.querySelector(CSS selectors)

قيمه المعامل

Parameter	Type	Description
CSS selectors	String	Required. Specifies one or more CSS selectors to match the element. These are used to select HTML elements based on their id, classes, types, attributes, values of attributes, etc. For multiple selectors, separate each selector with a comma. The returned element depends on which element that is first found in the document (See "More Examples"). Tip: For a list of all CSS Selectors, look at our CSS Selectors Reference.

تفاصيل تقنية

إصدار DOM:	محددات المستوى 1 عنصر العنصر
قيمة الإرجاع:	العنصر الأول الذي يطابق محدد (محددات) CSS المحدد. إذا لم يتم العثور على مطابقات ، فسيتم إرجاع قيمة فارغة. يطرح استثناء SYNTAX_ERR إذا كان المحدد (المحددات) المحدد غير صالح.

مزيد من الأمثلة

مثال

غيّر نص العنصر <p> الأول في عنصر <div>:

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

مثال

غيّر نص العنصر <p> الأول مع class = "example" في عنصر <div>:

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

مثال

تغيير نص عنصر بالمعرف = "عرض توضيحي" في عنصر <div>:

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

مثال

أضف حدًا أحمر إلى أول عنصر <a> له سمة هدف داخل عنصر <div>:

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

مثال

يوضح هذا المثال كيفية عمل المحددات المتعددة.

افترض أن لديك عنصرين: عنصر <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";