استعلام مستند HTML DOM
أمثلة
احصل على أول <p> عنصر:
document.querySelector("p");
احصل على العنصر الأول مع class = "example":
document.querySelector(".example");
المزيد من الأمثلة أدناه.
التعريف والاستخدام
تقوم querySelector()الطريقة بإرجاع العنصر الأول الذي يطابق محدد CSS.
لإرجاع جميع التطابقات (وليس الأولى فقط) ، استخدم querySelectorAll()بدلاً من ذلك.
كلاهما querySelector()وإرجاع NodeList . querySelectorAll()_
كلاهما querySelector()وطرح querySelectorAll()استثناء SYNTAX_ERR إذا كان المحدد (المحددات) غير صالح.
دروس:
برنامج JavaScript Node List التعليمي
طرق QuerySelector:
طريقة استعلام العنصر SelectorAll ()
أسلوب استعلام المستند المحدد ()
أسلوب استعلام المستند SelectorAll ()
طرق GetElement:
أسلوب getElementById () المستند
HTML DOM NodeList / HTMLCollection
الاختلافات بين HTMLCollection و NodeList
تعد كل من NodeList و HTMLCollection مجموعات تشبه المصفوفة (قوائم) من العقد (العناصر) المستخرجة من مستند. يمكن الوصول إلى العقد عن طريق أرقام الفهرس. يبدأ الفهرس من 0.
كلا الكائنين لهما خاصية طول تُرجع عدد العناصر في القائمة.
مجموعة HTML هي مجموعة مباشرة : إذا أضفت <li> عنصرًا إلى قائمة في DOM ، فستتغير القائمة في مجموعة HTML أيضًا.
NodeList عبارة عن مجموعة ثابتة : إذا أضفت <li> عنصرًا إلى قائمة في DOM ، فلن تتغير القائمة في NodeList.
وتعيد getElementsByClassName()الطرق getElementsByTagName()
مجموعة HTMLCollection.
وتعيد querySelector()العمليات querySelectorAll()
إلى NodeList.
بناء الجملة
document.querySelector(CSS selectors)
المعلمات
| Parameter | Description |
| CSS selectors |
Required. One or more CSS selectors. CSS selectors select HTML elements based on id, classes, types, attributes, values of attributes etc. For a full list, go to our CSS Selectors Reference. For multiple selectors, separate each selector with a comma (See "More Examples"). |
قيمة الإرجاع
| نوع | وصف |
| هدف | NodeList مع العنصر الأول الذي يطابق محدد (محددات) CSS. إذا لم يتم العثور على مباريات ، nullيتم إرجاعها. |
مزيد من الأمثلة
احصل على العنصر <p> الأول مع class = "example":
document.querySelector("p.example");
تغيير نص العنصر بالمعرف = "demo":
document.querySelector("#demo").innerHTML = "Hello World!";
حدد العنصر <p> الأول مع الأصل هو عنصر <div>.
document.querySelector("div > p");
حدد العنصر <a> الأول الذي يحتوي على سمة "الهدف":
document.querySelector("a[target]");
حدد أول <h3> أو أول <h4>:
<h3>A h3 element</h3>
<h4>A h4 element</h4>
document.querySelector("h3, h4").style.backgroundColor = "red";
حدد أول <h3> أو أول <h4>:
<h4>A h4 element</h4>
<h3>A h3 element</h3>
document.querySelector("h3, h4").style.backgroundColor = "red";
دعم المتصفح
document.querySelector() هي ميزة DOM المستوى 1 (1998).
إنه مدعوم بالكامل في جميع المتصفحات:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 9-11 | Yes | Yes | Yes | Yes |