مетод querySelectorAll() مستند HTML DOM Document
- صفحه قبل
- صفحه بعدی
- برگشت به لایه بالاتر مستندات HTML DOM
تعریف و استفاده
querySelectorAll() این روش تمام عناصر مطابق با انتخابگر CSS را برمیگرداند.
querySelectorAll() این روش NodeList را برمیگرداند.
اگر انتخابگر معتبر نباشد، querySelectorAll() این روش میتواند استثناها را به همراه داشته باشد SYNTAX_ERR استثناً.
مثال
مثال 1
انتخاب تمام عناصر با class="example":
document.querySelectorAll(".example");
مثال 2
افزودن رنگ پسزمینه به اولین عناصر <p>:
const nodeList= document.querySelectorAll("p");
nodeList[0].style.backgroundColor = "red";
مثال 3
افزودن رنگ پسزمینه به اولین عناصر <p> با class="example":
const nodeList = document.querySelectorAll("p.example");
nodeList[0].style.backgroundColor = "red";
مثال 4
تعداد عناصر class="example":
let numb = document.querySelectorAll(".example").length;
مثال 5
تنظیم رنگ پسزمینه تمام عناصر class="example":
const nodeList = document.querySelectorAll(".example");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
مثال 6
تمام <p> عناصر کی پس منظر رنگ کا قیاس:
let nodeList = document.querySelectorAll("p");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
مثال 7
تمام استعمال کرنے والے <a> عناصر کی حصیر کا قیاس:
const nodeList = document.querySelectorAll("a[target]");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.border = "10px solid red";
}
مثال 8
پیدائش کا عناصر <div> کی پیدائش کی <p> عناصر کی پس منظر رنگ کا قیاس:
const nodeList = document.querySelectorAll("div > p");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
مثال 9
تمام <h3>، <div> اور <span> عناصر کی پس منظر رنگ کا قیاس:
const nodeList = document.querySelectorAll("h3, div, span");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
گرامر
document.querySelectorAll(CSSselectors)
پارامتر
| پارامتر | وصف |
|---|---|
| CSSselectors |
ضروری۔ ایک یا کئی CSS selectors۔ CSS selector کا استعمال، id، کلاس، نوعیت، پرزو، پرزو کا قیمت وغیرہ کی بنیاد پر HTML عناصر کو منتخب کرتا ہے۔ پورا فہرست دیکھنے کے لئے، ہمارے دستورالعمل انتخابکننده CSS。 کئی انتخابات کے لئے، ہر انتخاب کو بندرگاہ سے علیحدہ کیا جائے (برائے مثال دیکھیے)。 |
بازگشت دیتا
| نوع | وصف |
|---|---|
| آئی-ڈیوائز |
CSS انتخاب کے ساتھ مناظر کئے گئے عناصر کا NodeList آئی-ڈیوائز اگر کوئی ماتخفیف نہیں پائی جاتی تو خالی NodeList آئی-ڈیوائز کو بازگشت دیتا ہے۔ |
HTMLCollection اور NodeList کی فرق
NodeList و HTMLcollection بہت قریب
دو دونوں سے واقفیت کا مجموعی نمونہ (لیسٹ) حاصل کیا جاتا ہے، جو کہ دستاویز سے نکالے گئے نیود (عناصر) کا مجموعی نمونہ (لیسٹ) ہوتا ہے۔ نیود کو انڈیکس نمبر (انداز) کے ذریعے پوائنٹ کیا جاسکتا ہے۔ انڈیکس سے شروع ہوتا ہے۔
دو دونوں کا length ایک پرزو، جو فہرست (کوٹی) میں عناصر کی تعداد کو بازگشت دیتا ہے。
HTMLCollection ہےعنصر مستندگروه.
NodeListنود مستندگروه (نود، ویژگی و متن).
پروژههای HTMLCollection از طریق نام، id یا شمارهی شمارهی آنها قابل دسترسی هستند.
پروژههای NodeList فقط از طریق شمارهی شمارهی آنها قابل دسترسی هستند.
HTMLCollection همیشهزندهگروه.
مثال: اگر یک عنصر <li> به لیست DOM اضافه شود، لیست HTMLCollection نیز تغییر میکند.
NodeList معمولاًاستاتیکگروه.
مثال: اگر یک عنصر <li> به لیست DOM اضافه شود، لیست NodeList تغییر نمیکند.
getElementsByClassName() و getElementsByTagName() روشها به صورت HTMLCollection زنده بازمیگردد.
querySelectorAll() روش به صورت NodeList استاتیک بازمیگردد.
childNodes ویژگیها به صورت NodeList زنده بازمیگردد.
پشتیبانی مرورگر
document.querySelectorAll() این یک ویژگی DOM Level 3 (2004) است.
همه مرورگرها از آن حمایت میکنند:
| کروم | IE | کنج | افراد | سافاری | اپرا |
|---|---|---|---|---|---|
| کروم | IE | کنج | افراد | سافاری | اپرا |
| پشتیبانی | 9-11 | پشتیبانی | پشتیبانی | پشتیبانی | پشتیبانی |
صفحات مرتبط
آموزش:
آموزش لیست Node List JavaScript
روش QuerySelector:
روش querySelector() مستند Element
روش querySelectorAll() مستند Element
روش querySelector() مستند Document
روش querySelectorAll() مستند Document
روش GetElement:
روش getElementById() مستند Document
- صفحه قبل
- صفحه بعدی
- برگشت به لایه بالاتر مستندات HTML DOM
