مетод querySelectorAll() مستند HTML DOM
- صفحه قبلی
- صفحه بعدی
- برگشت به لایه بالاتر مستندات 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");
برای (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
مثال 6
تنظیم رنگ پس‌زمینه همه عناصر <p> است:
let nodeList = document.querySelectorAll("p");
برای (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
مثال 7
تنظیم حاشیه همه عناصر <a> که ویژگی "target" دارند:
const nodeList = document.querySelectorAll("a[target]");
برای (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.border = "10px solid red";
}
مثال 8
تنظیم رنگ پس‌زمینه هر عناصر <p> که والد آن عناصر <div> است:
const nodeList = document.querySelectorAll("div > p");
برای (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
مثال 9
تنظیم رنگ پس‌زمینه همه عناصر <h3>، <div> و <span> است:
const nodeList = document.querySelectorAll("h3, div, span");
برای (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
شرح وضوح
document.querySelectorAll(CSSselectors)
پارامتر
| پارامتر | توضیح |
|---|---|
| CSSselectors |
ضروری. یک یا چند انتخاب‌گر CSS. انتخاب‌گرهای CSS بر اساس id، class، نوع، ویژگی، مقدار ویژگی و غیره برای انتخاب عناصر HTML استفاده می‌شوند. برای لیست کامل، لطفاً به دستورالعمل انتخاب‌کننده CSS. برای انتخاب‌گرهای چندگانه، هر انتخاب‌گر را با کاما جدا کنید (لطفاً مثال بالا را ببینید). |
مقدار بازگشتی
| نوع | توضیح |
|---|---|
| شیء |
شیء NodeList که شامل عناصر با انتخاب‌گر CSS است. اگر هیچ تطابقی پیدا نشد، یک شیء NodeList خالی برمی‌گردانند. |
تفاوت 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.querySelectorAll() این یک ویژگی DOM Level 3 (2004) است.
همه مرورگرها از آن پشتیبانی می‌کنند:
| Chrome | IE | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| Chrome | IE | Edge | Firefox | Safari | Opera |
| پشتیبانی | 9-11 | پشتیبانی | پشتیبانی | پشتیبانی | پشتیبانی |
صفحات مرتبط
آموزش:
روش QuerySelector:
روش querySelector() در Element
روش querySelectorAll() در Element
روش querySelector() در Document
روش querySelectorAll() در Document
روش GetElement:
روش getElementById() در Document
- صفحه قبلی
- صفحه بعدی
- برگشت به لایه بالاتر مستندات HTML DOM
