روش querySelector() مجموعه HTML DOM Document
- صفحه قبلی open()
- صفحه بعدی querySelectorAll()
- به لایه بالاتر بازگردید مجموعه HTML DOM Documents
تعریف و استفاده
querySelector() این روش بازگشت عناصری که با انتخاب‌گر CSS مطابقت دارند را تعریف می‌کنداولینعناصر.
برای بازگشتتمامتطابقات (نه تنها اولین تطابق)، از querySelectorAll() استفاده کنید.
اگر انتخاب‌گر معتبر نباشد، 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 |
ضروری. یک یا چند انتخاب‌گر CSS. انتخاب‌گرهای CSS بر اساس id، کلاس، نوع، ویژگی، مقدار ویژگی و غیره برای انتخاب عناصر HTML استفاده می‌شوند. برای لیست کامل، لطفاً به دستورالعمل مرجع انتخاب‌کننده CSS. برای انتخاب‌گرهای چندگانه، هر انتخاب‌گر را با کاما جدا کنید (لطفاً مثال بالای صفحه را ببینید). |
مقدار بازگشتی
| نوع | توضیح |
|---|---|
| اشیاء |
NodeList شامل اولین عنصر که با انتخاب‌گر 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 | پشتیبانی | پشتیبانی | پشتیبانی | پشتیبانی |
صفحات مرتبط
آموزش:
دستورالعمل مرجع انتخاب‌کننده CSS
دستورالعمل مرجع NodeList مجموعه HTML DOM
مетод QuerySelector:
مетод GetElement:
- صفحه قبلی open()
- صفحه بعدی querySelectorAll()
- به لایه بالاتر بازگردید مجموعه HTML DOM Documents
