مетод querySelector() در Document HTML DOM
- پچھلے پہلہ اُپن کریں
- آئندہ پہلہ querySelectorAll()
- پچھلے سطر کو واپس لوود کریں Documents HTML DOM
تعریف و استفاده
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 بسیار مشابہ
دو دونوں دستاویز سے نکالے گئے نود (عناصر) کا مشابہ فہرست (لیسٹ) ہیں جو اشاریہ نمبر (انڈیکس) کے ذریعے دستیاب ہوتا ہے۔ اشاریہ نمبر سے شروع ہوتا ہے۔
دو دونوں طول ایک خاصیت، جو فہرست (کا مجموعہ) میں عنصر کی تعداد کو واپس فراہم کرتی ہے۔
HTMLCollectionدستاویز عنصرکا مجموعہ.
NodeListدستاویز نودعنصر کا، نمائش کا اور تکسٹ کا نود کا مجموعہ.
HTMLCollection پروجیکٹ نام، id یا اشاریہ نمبر کے ذریعے دستیاب ہوتا ہے۔
NodeList پروجیکٹ صرف ان کی اشاریہ نمبر کے ذریعے دستیاب ہوتا ہے۔
HTMLCollection ہمیشہبروقتکا مجموعہ.
مثال: اگر <li> علامت کو DOM میں فہرست میں شامل کیا جائے تو HTMLCollection میں فہرست میں تبدیلی ہوگی۔
NodeList عام طور پرقابل تبدیلیکا مجموعہ.
مثال: اگر <li> علامت کو DOM میں فہرست میں شامل کیا جائے تو NodeList میں فہرست میں تبدیلی نہیں ہوگی۔
getElementsByClassName() اور getElementsByTagName() طریق بروقت HTMLCollection واپس فراہم کرتا ہے۔
querySelectorAll() طریق بروقت NodeList واپس فراہم کرتا ہے۔
childNodes ناموصولی کو بروقت NodeList واپس فراہم کرتا ہے۔
براوزر مدد
document.querySelector() یہ DOM Level 1 (1998) خصوصیت ہے۔
تمام براوزر اس پر مدد کریں:
| کروم | آئی ای | ایج | فائر فاکس | سافری | آپریا |
|---|---|---|---|---|---|
| کروم | آئی ای | ایج | فائر فاکس | سافری | آپریا |
| پشتیبانی | 9-11 | پشتیبانی | پشتیبانی | پشتیبانی | پشتیبانی |
- پچھلے پہلہ اُپن کریں
- آئندہ پہلہ querySelectorAll()
- پچھلے سطر کو واپس لوود کریں Documents HTML DOM
