HTML DOM querySelector() Method

مثال

تغيير نص العنصر الطفل الأول مع الطبقة = "المثال" في <div> العنصر:

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

أكثر "Try it Yourself" الأمثلة أدناه.

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

و querySelector() الأسلوب بإرجاع عنصر الطفل الأول الذي يتطابق مع CSS المحدد selector(s) عنصر.

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

لمزيد من المعلومات حول CSS المختارون، يرجى زيارة موقعنا CSS المختارون دروس ولدينا CSS المختارون المرجعي .

دعم المتصفح

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

طريقة
querySelector()	4.0	ثمانية	3.5	3.2	10.0

بناء الجملة

element .querySelector( CSS selectors )

قيم معلمة

معامل	اكتب	وصف
CSS selectors	String	مطلوب. تحديد واحد أو أكثر من محددات CSS لتتناسب مع عنصر. وتستخدم هذه لتحديد عناصر HTML على أساس من الهوية، والطبقات، وأنواع، والصفات والقيم من سمات، الخ لمحددات متعددة، فصل كل محدد بفاصلة. عنصر عاد التي تعتمد على العنصر الذي وجدت لأول مرة في وثيقة (See "More Examples") . نصيحة: للحصول على قائمة من كافة CSS المختارون، والنظر في موقعنا CSS المختارون المرجعي .

تفاصيل تقنية

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

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

مثال

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

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

انها محاولة لنفسك »

مثال

تغيير النص من أول <p> عنصر مع الطبقة = "المثال" في <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";

انها محاولة لنفسك »