HTML DOM NodeList ਸੰਦਰਭ ਨੂੰ ਦੇਖੋ

HTMLCollection ਅਤੇ NodeList ਦਾ ਅਲਗ

NodeList ਨੋਡ ਆਬਜੈਕਟ ਦੀ ਸਮਾਨ ਸੂਚੀ (ਸੂਚੀ) ਦਾ ਸਮੂਹ ਹੈ (ਸੂਚੀ)。

NodeList ਵਿੱਚ ਨੋਡਾਂ ਨੂੰ ਸਿਰਲੇਖ ਨਾਲ ਪਰਖਣਾ ਸੰਭਵ ਹੈ (ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ 0 ਤੋਂ)。

ਦੋਵੇਂ ਹੀNodeList ਵਿੱਚ ਨੋਡਾਂ ਦੀ ਗਿਣਤੀ ਵਾਪਸ ਕਰੋ。

NodeList vs. HTMLCollection

NodeList ਨਾਲ HTMLCollection ਕਾਫੀ ਨਜ਼ਦੀਕੀ ਹੈ。

ਪੰਨੇ ਦੇ ਹੇਠਾਂ ਦੇ ਵਰਣਨ ਦੇਖੋ。

ਕੌਣ NodeList ਵਾਪਸ ਦਿੰਦਾ ਹੈ?

childNodes ਗੁਣ

querySelectorAll() ਤਰੀਕਾ

getElementsByName() ਤਰੀਕਾ

ਗੁਣ ਅਤੇ ਤਰੀਕੇ

NodeList 'ਤੇ ਹੇਠ ਲਿਖੇ ਗੁਣ ਅਤੇ ਤਰੀਕੇ ਵਰਤਿਆ ਜਾ ਸਕਦੇ ਹਨ:

ਨਾਮ ਵਰਣਨ
entries() ਸਾਰੇ ਨੋਡਾਂ 'ਤੇ ਕੇ-ਵੇਲਿਊ ਇਟੇਰੇਟਰ ਵਾਪਸ ਕਰੋ。
forEach() ਸਾਰੇ ਨੋਡਾਂ ਉੱਤੇ ਕਾਲਬੈਕ ਫੰਕਸ਼ਨ ਚਲਾਓ。
ਸਿਰਲੇਖ ਵਾਪਸ ਕਰੋ。 item()
ਸਿਰਲੇਖ ਵਾਪਸ ਕਰੋ。 keys()
length NodeList ਵਿੱਚ ਨੋਡਾਂ ਦੀ ਗਿਣਤੀ ਵਾਪਸ ਕਰੋ。
values() ਸੂਚੀ ਵਿੱਚ ਦਿੱਤੇ ਮੁੱਲਾਂ ਨਾਲ ਇਟੇਰੇਟਰ ਵਾਪਸ ਕਰੋ。

ਉਦਾਹਰਣ

ਦਸਤਾਵੇਜ਼ ਵਿੱਚ ਸਾਰੇ <p> ਨੋਡ:

const myNodeList = document.querySelectorAll("p");

NodeList ਵਿੱਚ ਇੱਕੋ ਇੱਕ ਮੇਨੂੰ ਸਿਰਲੇਖ ਨਾਲ ਪਰਖਣਾ ਸੰਭਵ ਹੈ。

ਜੇਕਰ ਤੁਸੀਂ ਦੂਜੇ <p> ਨੋਡ ਨੂੰ ਪਰਖਣਾ ਚਾਹੁੰਦੇ ਹੋ ਤਾਂ ਤੁਸੀਂ ਲਿਖ ਸਕਦੇ ਹੋ:

myNodeList[1]

}

ਧਿਆਨ:ਸਿਰਲੇਖ ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ 0 ਤੋਂ。

HTML DOM Node List Length

length ਇਹ ਗੁਣ ਨੋਡ ਸੂਚੀ ਵਿੱਚ ਨੋਡਾਂ ਦੀ ਗਿਣਤੀ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ:

ਉਦਾਹਰਣ 1

myNodelist.length

}

ਜਦੋਂ ਤੁਸੀਂ ਨੋਡ ਸੂਚੀ ਵਿੱਚ ਨੋਡਾਂ ਨੂੰ ਪਰਖਣਾ ਚਾਹੁੰਦੇ ਹੋ ਤਾਂlength ਇਹ ਗੁਣ ਬਹੁਤ ਮਹੱਤਵਪੂਰਨ ਹਨ:

ਉਦਾਹਰਣ 2

ਨੋਡ ਸੂਚੀ ਵਿੱਚ ਸਾਰੇ <p> ਇੱਕੋ ਇੱਕ ਮੇਨੂੰ ਰੰਗ ਬਦਲੋ:

const myNodelist = document.querySelectorAll("p");
for (let i = 0; i < myNodelist.length; i++) {
  myNodelist[i].style.color = "red";
}

}

ਸਵੈ ਕੋਸ਼ਿਸ਼ ਕਰੋ

ਨਹੀਂ ਬੰਦਰੀ

NodeList ਨਹੀਂ ਹੈ ਬੰਦਰੀ

NodeList ਇੱਕ ਬੰਦਰੀ ਹੋਣਾ ਲੱਗਦੀ ਹੈ, ਪਰ ਇਹ ਇੱਕ ਬੰਦਰੀ ਨਹੀਂ ਹੈ

ਤੁਸੀਂ NodeList ਨੂੰ ਗੁਜਾਰ ਸਕਦੇ ਅਤੇ ਇਸ ਦੇ ਨੋਡ ਨੂੰ ਇੰਡੈਕਸ ਦੇ ਰਾਹੀਂ ਪਹੁੰਚ ਸਕਦੇ ਹੋ

ਪਰ ਤੁਸੀਂ NodeList 'ਤੇ Array ਮੱਥਾਵਾਂ, ਜਿਵੇਂ ਕਿ push()、pop() ਜਾਂ join() ਦਾ ਇਸਤੇਮਾਲ ਨਹੀਂ ਕਰ ਸਕਦੇ

HTMLCollection ਅਤੇ NodeList ਦਾ ਅਲਗ NodeList ਨਾਲ HTMLcollection

ਬਹੁਤ ਹੀ ਸਮਾਨ

ਦੋਵੇਂ ਹੀ ਦਸਤਾਵੇਜ ਤੋਂ ਨੋਡ (ਐਲੀਮੈਂਟ) ਨਾਲ ਬਣੇ ਸਮਾਨ ਆਕਾਰ ਦੇ ਸੰਗ੍ਰਹਿ (ਲਿਸਟ) ਹਨ।ਨੋਡ ਨੂੰ ਇੰਡੈਕਸ ਰਾਹੀਂ ਪਹੁੰਚਿਆ ਜਾ ਸਕਦਾ ਹੈ।ਇੰਡੈਕਸ 0 ਤੋਂ ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ。 ਦੋਵੇਂ ਹੀlength ਪ੍ਰਤੀਯੋਗਿਤਾ

ਜੋ ਲਿਸਟ (ਕੋਲੈਕਸ਼ਨ) ਵਿੱਚ ਐਲੀਮੈਂਟਾਂ ਦੀ ਗਿਣਤੀ ਵਾਪਸ ਦਿੰਦੀ ਹੈHTMLCollection ਇੱਕ ਕੋਲੈਕਸ਼ਨ ਹੈਦਸਤਾਵੇਜ ਐਲੀਮੈਂਟ

NodeList ਇੱਕ ਕੋਲੈਕਸ਼ਨ ਹੈਦਸਤਾਵੇਜ ਨੋਡਐਲੀਮੈਂਟ ਨੋਡ, ਪ੍ਰਤੀਯੋਗਿਤਾ ਨੋਡ ਅਤੇ ਟੈਕਸਟ ਨੋਡ ਦੀ ਕੋਲੈਕਸ਼ਨ

HTMLCollection ਪ੍ਰੋਜੈਕਟ ਆਪਣੇ ਨਾਮ, id ਜਾਂ ਇੰਡੈਕਸ ਰਾਹੀਂ ਪਹੁੰਚਿਆ ਜਾ ਸਕਦਾ ਹੈ

NodeList ਅਣੂਮਾਨ ਕੀਤੇ ਜਾਂਦੇ ਹਨ ਹੀ ਆਪਣੇ ਇੰਡੈਕਸ ਨੂੰ ਰਾਹੀਂ ਪਹੁੰਚਿਆ ਜਾ ਸਕਦਾ ਹੈ

NodeList ਅਣੂਮਾਨ ਕੀਤੇ ਜਾਂਦੇ ਹਨHTMLCollection ਹਮੇਸ਼ਾ ਇੱਕ ਕੋਲੈਕਸ਼ਨ ਹੁੰਦੀ ਹੈਰਿਆਲ

NodeList ਆਮ ਤੌਰ 'ਤੇ ਇੱਕ ਕੋਲੈਕਸ਼ਨ ਹੁੰਦੀ ਹੈ।ਉਦਾਹਰਣ ਵਜੋਂ: ਜੇਕਰ <li> ਐਲੀਮੈਂਟ ਨੂੰ DOM ਵਿੱਚ ਸੂਚੀ ਵਿੱਚ ਜੋੜਿਆ ਜਾਂਦਾ ਹੈ, ਤਾਂ HTMLCollection ਵਿੱਚ ਸੂਚੀ ਵੀ ਬਦਲ ਜਾਵੇਗੀ。ਸਟੇਟਿਕਕੋਲੈਕਸ਼ਨ।ਉਦਾਹਰਣ ਵਜੋਂ: ਜੇਕਰ <li> ਐਲੀਮੈਂਟ ਨੂੰ DOM ਵਿੱਚ ਸੂਚੀ ਵਿੱਚ ਜੋੜਿਆ ਜਾਂਦਾ ਹੈ, ਤਾਂ NodeList ਵਿੱਚ ਸੂਚੀ ਬਦਲ ਨਹੀਂ ਸਕਦੀ ਹੈ。

getElementsByClassName() ਅਤੇ getElementsByTagName() ਮੱਥਾ NodeList ਵਾਪਸ ਦਿੰਦੀ ਹੈ。

querySelectorAll() ਮੱਥਾ ਰਿਆਲ NodeList ਵਾਪਸ ਦਿੰਦੀ ਹੈ。

childNodes ਪ੍ਰਤੀਯੋਗਿਤਾ ਰਿਆਲ NodeList ਵਾਪਸ ਦਿੰਦੀ ਹੈ。

ਰਿਆਲ ਨੋਡ ਸੂਚੀ

ਕੁਝ ਹਾਲਾਤਾਂ ਵਿੱਚ, NodeList ਹੈਰਿਆਲ ਸਮੇਂਦੁਆਰਾ: DOM ਵਿੱਚ ਬਦਲਾਅ NodeList ਅੱਪਡੇਟ ਕਰਦੇ ਹਨ。

childNodes ਮੱਥਾ ਰਿਆਲ ਟਾਈਮ NodeList ਵਾਪਸ ਦਿੰਦੀ ਹੈ。