HTML DOM Document querySelector() ਮੱਥਾ
- ਪਿੱਛਲਾ ਪੰਨਾ open()
- ਅਗਲਾ ਪੰਨਾ querySelectorAll()
- ਪਿੱਛੇ ਵਾਪਸ ਜਾਓ HTML DOM Documents
ਵਿਆਖਿਆ ਅਤੇ ਵਰਤੋਂ
querySelector() ਮੰਥਨ ਵਾਲਾ ਮੰਥਨ ਕਰਦਾ ਮੰਥਨ ਕਰਦਾ ਹੈਪਹਿਲੇਇਲੈਕਟ੍ਰੌਨ ਚੋਣ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ ਤਾਂ
ਜੇਕਰ ਤੁਸੀਂਸਾਰੇਮੇਲ ਖਾਣ ਵਾਲੇ ਸਾਰੇ ਮੇਲ ਮਿਲਣ ਵਾਲੇ (ਨਾ ਸਿਰਫ਼ ਪਹਿਲੇ ਮੇਲ ਮਿਲਣ ਵਾਲੇ), ਕਿਰਤਾਰ ਕਰਕੇ querySelectorAll() ਵਰਤੋ
ਜੇਕਰ ਚੋਣਕਾਰ ਗਲਤ ਹੋਵੇ ਤਾਂ querySelector() ਅਤੇ querySelectorAll() ਸਭ ਦੀ ਤਰ੍ਹਾਂ SYNTAX_ERR ਅਸ਼ਰੀਰਤ
ਉਦਾਹਰਣ
ਉਦਾਹਰਣ 1
ਪਹਿਲੇ <p> ਇਲੈਕਟ੍ਰੌਨ ਲੈਣਾ:
document.querySelector("p");
ਉਦਾਹਰਣ 2
class="example" ਵਾਲੇ ਪਹਿਲੇ ਇਲੈਕਟ੍ਰੌਨ ਲੈਣਾ:
document.querySelector(".example");
ਉਦਾਹਰਣ 3
class="example" ਵਾਲੇ ਪਹਿਲੇ <p> ਇਲੈਕਟ੍ਰੌਨ ਲੈਣਾ:
document.querySelector("p.example");
ਉਦਾਹਰਣ 4
id="demo" ਦੇ ਇਲੈਕਟ੍ਰੌਨ ਦੇ ਟੈਕਸਟ ਨੂੰ ਬਦਲੋ:
document.querySelector("#demo").innerHTML = "Hello World!";
ਉਦਾਹਰਣ 5
ਪਹਿਲੇ <div> ਵਾਲੇ ਪੁਰਖ ਵਾਲੇ <p> ਇਲੈਕਟ੍ਰੌਨ ਚੋਣ ਕਰੋ:
document.querySelector("div > p");
ਉਦਾਹਰਣ 6
ਪਹਿਲੇ "target" ਵਿਸ਼ੇਸ਼ਤਾ ਵਾਲੇ <a> ਇਲੈਕਟ੍ਰੌਨ ਚੋਣ ਕਰੋ:
document.querySelector("a[target]");
ਉਦਾਹਰਣ 7
ਪਹਿਲੇ <h3> ਜਾਂ ਪਹਿਲੇ <h4> ਚੋਣ ਕਰੋ:
<h3>A h3 element</h3>
<h4>A h4 element</h4>
document.querySelector("h3, h4").style.backgroundColor = "red";
ਉਦਾਹਰਣ 8
ਪਹਿਲੇ <h3> ਜਾਂ ਪਹਿਲੇ <h4> ਚੋਣ ਕਰੋ:
<h4>A h4 element</h4>
<h3>A h3 element</h3>
document.querySelector("h3, h4").style.backgroundColor = "red";
ਗਰੰਥ
document.querySelector(cssSelectors)
ਪੈਰਾਮੀਟਰ
| ਪੈਰਾਮੀਟਰ | ਵਰਣਨ |
|---|---|
| cssSelectors |
ਲਾਜ਼ਮੀ। ਇੱਕ ਜਾਂ ਬਹੁਤ ਸੇਲੈਕਟਰ。 CSS ਚੋਣਕਾਰ id, ਵਰਗ, ਪ੍ਰਕਾਰ, ਵਿਸ਼ੇਸ਼ਤਾ, ਵਿਸ਼ੇਸ਼ਤਾ ਮੁੱਲ ਆਦਿ ਦੇ ਅਧਾਰ 'ਤੇ HTML ਇਲੈਕਟ੍ਰੌਨ ਚੋਣ ਕਰਦਾ ਹੈ。 ਪੂਰੀ ਸੂਚੀ ਲਈ ਸਾਡੇ ਇੰਟਰਨੈੱਟ ਸਾਈਟ 'ਤੇ ਜਾਵੋਗੇ。 CSS ਸੈਲੈਕਟਰ ਪੁਸਤਕਾਰ。 ਬਹੁਤ ਸੇਲੈਕਟਰ ਲਈ ਹਰੇਕ ਸੈਲੈਕਟਰ ਨੂੰ ਕੋਮਾ ਨਾਲ ਵੰਡੋ (ਪੇਜ ਉੱਪਰਲੇ ਉਦਾਹਰਣ ਨੂੰ ਦੇਖੋ)。 |
ਵਾਪਸ ਦਿੱਤਾ ਜਾਣ ਵਾਲਾ ਮੁੱਲ
| ਇੰਤਜਾਮ | ਵਰਣਨ |
|---|---|
| ਆਬੋਧਕ |
CSS ਚੋਣਕਾਰ ਨਾਲ ਮੇਲ ਖਾਣ ਵਾਲੇ ਪਹਿਲੇ ਇਲੈਕਟ੍ਰੌਨ ਦਾ NodeList。 ਜੇਕਰ ਮੇਲ ਨਹੀਂ ਮਿਲਦਾ ਤਾਂ null ਵਾਪਸ ਦਿੱਤਾ ਜਾਵੇਗਾ。 |
HTMLCollection ਅਤੇ NodeList ਦਾ ਅਲੱਗ-ਅਲੱਗ
NodeList ਅਤੇ HTMLcollection ਮੁਖਤਿਆਰ
ਦੋਵੇਂ ਵੀ ਦਸਤਾਵੇਜ ਤੋਂ ਉਠਾਏ ਗਏ ਨੋਡ (ਐਲੀਮੈਂਟ) ਦੇ ਸਮਾਨ ਅਨੁਕ੍ਰਮਿਤ ਸਮੂਹ (ਲਿਸਟ) ਹਨ। ਨੋਡ ਨੂੰ ਇੰਡੈਕਸ (ਨਾਮਜਾਂ) ਰਾਹੀਂ ਪਹੁੰਚਿਆ ਜਾ ਸਕਦਾ ਹੈ। ਇੰਡੈਕਸ ਸ਼ੁਰੂ ਵਿੱਚ ਹੁੰਦਾ ਹੈ。
ਦੋਵੇਂ ਹੀ length ਲੰਬਾਈ, ਇਹ ਲਿਸਟ (ਸਮੂਹ) ਵਿੱਚ ਐਲੀਮੈਂਟਾਂ ਦੀ ਸੰਖਿਆ ਨੂੰ ਵਾਪਸ ਦਿੰਦੀ ਹੈ。
HTMLCollection ਹੈਹਮੇਸ਼ਾ ਦਸਤਾਵੇਜ ਐਲੀਮੈਂਟਦਾ ਸਮੂਹ
NodeList ਹੈਦਸਤਾਵੇਜ ਨੂੰਐਲੀਮੈਂਟ ਨੂੰ ਆਪਣੇ ਨਾਮ, id ਜਾਂ ਇੰਡੈਕਸ ਰਾਹੀਂ ਪਹੁੰਚਿਆ ਜਾ ਸਕਦਾ ਹੈ。
HTMLCollection ਐਲੀਮੈਂਟ ਉਨ੍ਹਾਂ ਦੇ ਨਾਮ, id ਜਾਂ ਇੰਡੈਕਸ ਰਾਹੀਂ ਪਹੁੰਚਿਆ ਜਾ ਸਕਦਾ ਹੈ。
NodeList ਐਲੀਮੈਂਟ ਸਿਰਫ ਉਨ੍ਹਾਂ ਦੇ ਇੰਡੈਕਸ ਰਾਹੀਂ ਪਹੁੰਚਿਆ ਜਾ ਸਕਦਾ ਹੈ。
HTMLCollection ਹਮੇਸ਼ਾ ਰਿਅਲ ਹੁੰਦੀ ਹੈਰਿਅਲਦਾ ਸਮੂਹ
ਉਦਾਹਰਣ: ਜੇਕਰ <li> ਐਲੀਮੈਂਟ ਨੂੰ DOM ਵਿੱਚ ਸੂਚੀ ਵਿੱਚ ਜੋੜਿਆ ਜਾਵੇ ਤਾਂ HTMLCollection ਵਿੱਚ ਸੂਚੀ ਵੀ ਬਦਲ ਜਾਵੇਗੀ。
NodeList ਆਮ ਤੌਰ 'ਤੇਸਟੇਟਿਕਦਾ ਸਮੂਹ
ਉਦਾਹਰਣ: ਜੇਕਰ <li> ਐਲੀਮੈਂਟ ਨੂੰ DOM ਵਿੱਚ ਸੂਚੀ ਵਿੱਚ ਜੋੜਿਆ ਜਾਵੇ ਤਾਂ NodeList ਵਿੱਚ ਸੂਚੀ ਬਦਲ ਨਹੀਂ ਹੁੰਦੀ ਹੈ。
getElementsByClassName() ਅਤੇ getElementsByTagName() ਸਾਰੇ ਮੈਥਡ ਰਿਅਲ ਨੂੰ ਲਿਸਟ ਦਿੰਦੇ ਹਨ。
querySelectorAll() ਮੈਥਡ ਸਟੇਟਿਕ ਨੂੰ ਲਿਸਟ ਦਿੰਦੀ ਹੈ。
childNodes ਪ੍ਰਤੀਯੋਗਿਤਾ ਵਾਪਸ ਰਿਅਲ ਨੂੰ ਲਿਸਟ ਦਿੰਦੀ ਹੈ。
ਬਰਾਉਜ਼ਰ ਸਮਰਥਨ
document.querySelector() ਇਹ DOM Level 1 (1998) ਵਿਸ਼ੇਸ਼ਤਾ ਹੈ।
ਸਾਰੇ ਬਰਾਉਜ਼ਰ ਇਸ ਨੂੰ ਸਮਰਥਨ ਕਰਦੇ ਹਨ:
| ਚਰਮੋਗਰਾਈਨ | IE | ਐਜ਼ | ਫਾਇਰਫਾਕਸ | ਸੈਫਾਰੀ | ਓਪਰਾ |
|---|---|---|---|---|---|
| ਚਰਮੋਗਰਾਈਨ | IE | ਐਜ਼ | ਫਾਇਰਫਾਕਸ | ਸੈਫਾਰੀ | ਓਪਰਾ |
| ਸਮਰਥਨ | 9-11 | ਸਮਰਥਨ | ਸਮਰਥਨ | ਸਮਰਥਨ | ਸਮਰਥਨ |
ਸਬੰਧਤ ਪੰਨੇ
ਟੂਰੀਅਲ:
QuerySelector ਮੈਥਡ:
GetElement ਮੈਥਡ:
- ਪਿੱਛਲਾ ਪੰਨਾ open()
- ਅਗਲਾ ਪੰਨਾ querySelectorAll()
- ਪਿੱਛੇ ਵਾਪਸ ਜਾਓ HTML DOM Documents
