طريقة querySelector() لمستند DOM HTML
- الصفحة السابقة open()
- الصفحة التالية querySelectorAll()
- العودة إلى الطبقة العليا مستندات DOM HTML
التعريف والاستخدام
querySelector() يستعيد الطريقة الأول العناصر التي تطابق selector CSS.الأولالعناصر.
للحصول علىكلالمطابقات (ليس فقط المطابق الأول)، استخدم querySelectorAll().
إذا كان selector غير صالح، querySelector() و querySelectorAll() ستقوم بإطلاقها SYNTAX_ERR الاستثناءات.
المثال
مثال 1
الحصول على الأول <p>:
document.querySelector("p");
مثال 2
الحصول على الأول يحتوي على الفئة "example":
document.querySelector(".example");
مثال 3
الحصول على الأول <p> يحتوي على الفئة "example":
document.querySelector("p.example");
مثال 4
غير النص الخاص بالعنصر الذي يحتوي على id="demo":
document.querySelector("#demo").innerHTML = "Hello World!";
مثال 5
اختر الأول <p> يكون العنصر الأب له <div>:
document.querySelector("div > p");
مثال 6
اختر الأول <a> يحتوي على الخاصية "target":
document.querySelector("a[target]");
مثال 7
اختر الأول <h3> أو الأول <h4>:
<h3>عنصر h3</h3>
<h4>عنصر h4</h4>
document.querySelector("h3, h4").style.backgroundColor = "red";
مثال 8
اختر الأول <h3> أو الأول <h4>:
<h4>عنصر h4</h4>
<h3>عنصر h3</h3>
document.querySelector("h3, h4").style.backgroundColor = "red";
النحو
document.querySelector(cssSelectors)
المعلمات
| المعلمات | الوصف |
|---|---|
| cssSelectors |
مطلوب. selector CSS واحد أو أكثر. selector CSS يقوم بتحديد عناصر HTML بناءً على id، الفئات، النوع، الخصائص، قيم الخصائص وما إلى ذلك. للحصول على قائمة كاملة، يرجى زيارة دليل مرجع مختار CSS. بالنسبة للعديد من selectors، استخدم نقاط عالية لفصل كل selector (انظر مثال أعلى الصفحة). |
القيمة المطلوبة
| النوع | الوصف |
|---|---|
| المعلمات |
NodeList يحتوي على العنصر الأول الذي يطابق selector CSS. إذا لم يتم العثور على أي تطابق، يتم العودة إلى null. |
فارق بين HTMLCollection و NodeList
NodeList و HTMLcollection مماثلة جدًا.
كلاهما هو مجموعة من العناصر (النود) التي تم استخراجها من الوثيقة (النص) كجمع شبيه بالقائمة (النص) يمكن الوصول إليها من خلال أرقامها. يبدأ الرقم من 0.
كلاهما: length الخصائص، التي تعود قائمة (مجموعة) من العناصر في القائمة (المجموعة).
HTMLCollection هي:عنصر الوثيقةالمجموعة.
NodeList هي:عقدة الوثيقةمجموعة من (عنصر النص، عقدة الخاصية، عقدة النص).
يمكن الوصول إلى مشاريع HTMLCollection من خلال أسمائهم أو id أو أرقامهم.
يمكن الوصول إلى مشاريع NodeList فقط من خلال أرقامها.
HTMLCollection دائمًا:حيةالمجموعة.
على سبيل المثال: إذا أضفت عنصر <li> إلى قائمة DOM، فإن قائمة HTMLCollection ستتغير أيضًا.
عادة NodeList:ثابتةالمجموعة.
على سبيل المثال: إذا أضفت عنصر <li> إلى قائمة DOM، فإن قائمة NodeList لن تتغير.
getElementsByClassName() و getElementsByTagName() تعود جميع الطرق NodeList حية.
querySelectorAll() تعود الطريقة NodeList ثابتة.
childNodes الخصائص تعود NodeList حية.
دعم المتصفحات
document.querySelector() هي خاصية DOM Level 1 (1998).
يدعم جميع المتصفحات:
| Chrome | IE | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| Chrome | IE | Edge | Firefox | Safari | Opera |
| الدعم | 9-11 | الدعم | الدعم | الدعم | الدعم |
الصفحات ذات الصلة
دليل:
طريقة QuerySelector:
طريقة GetElement:
- الصفحة السابقة open()
- الصفحة التالية querySelectorAll()
- العودة إلى الطبقة العليا مستندات DOM HTML
