مثال
الحصول على العنصر الأول في وثيقة مع الطبقة = "مثال":
document.querySelector(".example"); انها محاولة لنفسك » أكثر "Try it Yourself" الأمثلة أدناه.
تعريف والاستخدام
و querySelector() الأسلوب بإرجاع العنصر الأول الذي يطابق CSS المحدد selector(s) في الوثيقة.
ملاحظة: querySelector() الأسلوب بإرجاع فقط العنصر الأول الذي يطابق محددات معينة. إعادة جميع المباريات، استخدم querySelectorAll() طريقة بدلا من ذلك.
إذا كان محدد مباريات معرف في الوثيقة التي يتم استخدامها عدة مرات (لاحظ أن "id" يجب أن تكون فريدة من نوعها داخل صفحة ويجب أن لا تستخدم أكثر من مرة واحدة)، فإنها ترجع أول عنصر مطابقة.
لمزيد من المعلومات حول CSS المختارون، يرجى زيارة موقعنا CSS المختارون دروس ولدينا CSS المختارون المرجعي .
دعم المتصفح
الأرقام في الجدول تحدد أول إصدار المستعرض الذي يدعم بشكل كامل الأسلوب.
| طريقة | |||||
|---|---|---|---|---|---|
| querySelector() | 4.0 | ثمانية | 3.5 | 3.2 | 10.0 |
بناء الجملة
document.querySelector( CSS selectors )قيم معلمة
| معامل | اكتب | وصف |
|---|---|---|
| CSS selectors | String | مطلوب. تحديد واحد أو أكثر من محددات CSS لتتناسب مع عنصر. وتستخدم هذه لتحديد عناصر HTML على أساس من الهوية، والطبقات، وأنواع، والصفات والقيم من سمات، الخ لمحددات متعددة، فصل كل محدد بفاصلة. عنصر عاد التي تعتمد على العنصر الذي وجدت لأول مرة في وثيقة (See "More Examples") . نصيحة: للحصول على قائمة من كافة CSS المختارون، والنظر في موقعنا CSS المختارون المرجعي . |
تفاصيل تقنية
| صفحة DOM: | مستوى محددات كائن 1 الوثيقة |
|---|---|
| قيمة الإرجاع: | كائن NodeList، وهو ما يمثل العنصر الأول الذي يطابق CSS المحدد selector(s) . إذا لم يتم العثور على المباريات، يتم إرجاع قيمة خالية. يلقي استثناء SYNTAX_ERR إذا المحدد selector(s) غير صالح. |
مزيد من الأمثلة
مثال
الحصول على أول <p> عنصر في وثيقة مع الطبقة = "مثال":
document.querySelector("p.example"); انها محاولة لنفسك » مثال
تغيير نص عنصر مع معرف = "التجريبي":
document.querySelector("#demo").innerHTML = "Hello World!";
انها محاولة لنفسك » مثال
الحصول على أول <p> عنصر في المستند حيث الأصل هو <div> العنصر.
document.querySelector("div > p"); انها محاولة لنفسك » مثال
الحصول على أول <a> عنصر في المستند الذي لديه "target" سمة:
document.querySelector("a[target]"); انها محاولة لنفسك » مثال
يوضح هذا المثال كيفية متعددة تعمل محددات.
افترض أن لديك عنصرين: <h2> و <h3> العنصر.
سوف التعليمة البرمجية التالية إضافة لون الخلفية لأول <h2> عنصر في الوثيقة:
<h2>A h2 element</h2>
<h3>A h3 element</h3>
document.querySelector("h2,
h3").style.backgroundColor = "red"; انها محاولة لنفسك » ومع ذلك، إذا كان <h3> وضعت عنصر قبل <h2> عنصر في الوثيقة. و <h3> العنصر هو الذي سيحصل على لون الخلفية الحمراء.
<h3>A h3 element</h3>
<h2>A h2 element</h2>
document.querySelector("h2,
h3").style.backgroundColor = "red"; انها محاولة لنفسك » صفحات ذات صلة
CSS دروس: CSS المختارون
CSS المرجعي: CSS المختارون المرجعي
جافا سكريبت تعليمي: قائمة جافا سكريبت HTML DOM عقدة
جافا سكريبت المرجعي: العنصر. querySelector()
HTML DOM المرجعي: وثيقة. querySelectorAll()
جافا سكريبت المرجعي: العنصر. querySelectorAll()