HTML DOM Document querySelectorAll() ਮੱਥਦਾ
- ਪਿੰਡ ਪੰਨਾ
- ਅਗਲਾ ਪੰਨਾ
- ਉੱਪਰਲੇ ਪੱਧਰ ਵਾਪਸ ਜਾਓ HTML DOM Documents
ਪਰਿਭਾਸ਼ਾ ਅਤੇ ਵਰਤੋਂ
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
ਪਹਿਲੀ class="example" <p> ਤੌਲੀ ਨੂੰ ਪਿੱਨ ਰੰਗ ਜੋੜੋ:
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
ਸਾਰੇ "target" ਪੈਰਾਮੀਟਰ ਵਾਲੇ <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 ਚੋਣਕਰਤਾ ਆਈਡੀ, ਕਲਾਸ, ਪ੍ਰਕਾਰ, ਪੈਰਾਮੀਟਰ ਆਦਿ ਦੇ ਅਧਾਰ `ਤੇ HTML ਇਲੈਕਟ੍ਰੌਨ ਚੋਣ ਕਰਦੀ ਹੈ。 ਪੂਰੀ ਸੂਚੀ ਲਈ ਸਾਡੇ CSS ਚੋਣਕਾਰ ਮੈਨੂਅਲ。 ਬਹੁਤ ਸੈਕਸ਼ਨ ਲਈ ਹਰ ਇੱਕ ਚੋਣਕਰਤਾ ਨੂੰ ਕੋਮਾ ਨਾਲ ਵੰਡੋ (ਦੇਖੋ ਉੱਪਰ ਵਾਲਾ ਉਦਾਹਰਣ) |
ਵਾਪਸ ਦਿੱਤਾ ਜਾਂਦਾ ਹੈ
| ਪ੍ਰਕਾਰ | ਵਰਣਨ |
|---|---|
| ਆਬਜ਼ਦ |
CSS ਚੋਣਕਰਤਾ ਨਾਲ ਮੇਲ ਖਾਣ ਵਾਲੇ ਇਲੈਕਟ੍ਰੌਨ ਦਾ NodeList ਆਬਜ਼ਦ ਜੇਕਰ ਮੇਲ ਨਹੀਂ ਮਿਲਦਾ ਤਾਂ ਖਾਲੀ ਦਾ NodeList ਆਬਜ਼ਦ ਵਾਪਸ ਦਿੰਦਾ ਹੈ。 |
HTMLCollection ਅਤੇ NodeList ਦਾ ਅੰਤਰ
NodeList ਅਤੇ HTMLcollection ਬਹੁਤ ਹੀ ਸਮਾਨ
ਦੋਵੇਂ ਵੀ ਡਾਕੂਮੈਂਟ ਤੋਂ ਨੋਡ (ਇਲੈਕਟ੍ਰੌਨ) ਦੇ ਲਗਾਤਾਰ ਕੋਲੇਜ਼ ਵਾਲੇ ਕੈਸਟ (ਲਿਸਟ) ਹਨ (ਲਿਸਟ)। ਨੋਡ ਨੂੰ ਇੰਡੈਕਸ ਨੰਬਰ (ਸ਼ਾਰਟ) ਰਾਹੀਂ ਪਹੁੰਚ ਸਕਦੇ ਹਨ। ਇੰਡੈਕਸ 0 ਤੋਂ ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ。
ਦੋਵੇਂ ਹੀ 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) ਵਿਸ਼ੇਸ਼ਤਾ ਹੈ।
ਸਾਰੇ ਬਰਾਉਜ਼ਰ ਇਹ ਸਮਰਥਨ ਕਰਦੇ ਹਨ:
| ਚਰਾਮ | ਆਈਈ | ਐਜ਼ਡ | ਫਾਇਰਫਾਕਸ | ਸੈਫਾਰੀ | ਓਪਰਾ |
|---|---|---|---|---|---|
| ਚਰਾਮ | ਆਈਈ | ਐਜ਼ਡ | ਫਾਇਰਫਾਕਸ | ਸੈਫਾਰੀ | ਓਪਰਾ |
| ਸਮਰਥਨ | 9-11 | ਸਮਰਥਨ | ਸਮਰਥਨ | ਸਮਰਥਨ | ਸਮਰਥਨ |
ਸਬੰਧਤ ਪੰਨੇ
ਸਿੱਖਿਆ:
QuerySelector ਮੈਥਡ:
Element querySelectorAll() ਮੈਥਡ
Document querySelectorAll() ਮੈਥਡ
GetElement ਮੈਥਡ:
Document getElementById() ਮੈਥਡ
- ਪਿੰਡ ਪੰਨਾ
- ਅਗਲਾ ਪੰਨਾ
- ਉੱਪਰਲੇ ਪੱਧਰ ਵਾਪਸ ਜਾਓ HTML DOM Documents
