مетод استعلام العنصر DOM Element querySelector()

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

querySelector() تعود الطريقة إلى أول عنصر فرعي يتطابق مع المزید من الاختيار CSS للعنصر.

ملاحظة:

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

انظر أيضًا:

دليل مرجعي:

سمة classList

سمة className

طريقة querySelectorAll()

طريقة getElementsByTagName()

طريقة getElementsByClassName()

ميزة Style لـ HTML DOM

دليل:

قواعد اللغة CSS

محددات CSS

دليل مرجعي للمحددات CSS

مثال

مثال 1

تغيير نص أول عنصر فرعي يحتوي على class="example" في مكون <div>:

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

تجربة بنفسك

يُقدم المزيد من الأمثلة في أسفل الصفحة.

النحو

النوع.querySelector(CSSselectors)

الم参数

الم参数 الوصف
CSSselectors

مطلوب. نصيحة. يُحدد مزید من الاختيار CSS لتناسب العناصر.

يُستخدم اختيار 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

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

افترض أن لديك عنصرين: <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>، فإن لون الخلفية سيكون أزرق.

<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:قائمة العناصر DOM HTML JavaScript

دليل JavaScript:document.querySelector()

دليل JavaScript:element.querySelectorAll()

دليل HTML DOM:document.querySelectorAll()