HTML DOM Element firstChild ਪ੍ਰਤੀਯੋਗਿਤਾ

ਵਿਆਖਿਆ ਅਤੇ ਵਰਤੋਂ

firstChild ਪ੍ਰਤੀਯੋਗਿਤਾ ਪਹਿਲੇ ਸਬ-ਨੋਡ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰਦੀ ਹੈ ਅਤੇ ਇਹ Node ਆਬਜੈਕਟ ਪ੍ਰਾਪਤ ਕਰਦੀ ਹੈ。

firstChild ਪ੍ਰਤੀਯੋਗਿਤਾ ਰੀਡ-ਓਨਲੀ ਹੈ。

firstChild ਪ੍ਰਤੀਯੋਗਿਤਾ ਨਾਲ childNodes[0] ਮੰਗਨਾ ਹੈ।

ਧਿਆਨ:

firstChild ਪਹਿਲੇ ਸਬ-ਨੋਡ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰੋ: ਇਲੈਕਟ੍ਰੌਨ ਨੋਡ, ਟੈਕਸਟ ਨੋਡ ਜਾਂ ਟਿੱਪਣੀ ਨੋਡ。

ਇਲੈਕਟ੍ਰੌਨ ਦਰਮਿਆਨ ਦੀ ਖਾਲੀ ਜਗ੍ਹਾ ਵੀ ਟੈਕਸਟ ਨੋਡ ਹੈ。

ਬਦਲੇ ਵਿੱਚ:

firstElementChild ਪ੍ਰਤੀਯੋਗਿਤਾ - firstElementChild ਪ੍ਰਤੀਯੋਗਿਤਾ ਪਹਿਲੇ ਸਬ-ਨੋਡ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰਦੀ ਹੈ (ਟੈਕਸਟ ਅਤੇ ਟਿੱਪਣੀ ਨੋਡ ਨੂੰ ਨਾ ਧਿਆਨ ਵਿੱਚ ਰੱਖੋ)。

ਹੋਰ ਦੇਖੋ:

childNodes ਪ੍ਰਤੀਯੋਗਿਤਾ

lastChild ਪ੍ਰਤੀਯੋਗਿਤਾ

nextSibling ਪ੍ਰਤੀਯੋਗਿਤਾ

previousSibling ਪ੍ਰਤੀਯੋਗਿਤਾ

ਨੋਡ ਪ੍ਰਤੀਯੋਗਿਤਾ

parentNode ਪ੍ਰਤੀਯੋਗਿਤਾ

nodeName ਪ੍ਰਤੀਯੋਗਿਤਾ

nodeType ਪ੍ਰਤੀਯੋਗਿਤਾ

nodeValue ਪ੍ਰਤੀਯੋਗਿਤਾ

ਇਨਸਟੈਂਸ

ਉਦਾਹਰਣ 1

ਪਹਿਲੇ ਸਬ-ਨੋਡ ਦੇ HTML ਸਮੱਗਰੀ ਨੂੰ <ul> ਇਲੈਕਟ੍ਰੌਨ ਪ੍ਰਾਪਤ ਕਰੋ:

document.getElementById("myList").firstChild.innerHTML;

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

ਉਦਾਹਰਣ 2

ਪਹਿਲੇ ਸਬ-ਨੋਡ ਦੇ ਟੈਕਸਟ ਨੂੰ <select> ਇਲੈਕਟ੍ਰੌਨ ਪ੍ਰਾਪਤ ਕਰੋ:

let text = document.getElementById("mySelect").firstChild.text;

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

ਉਦਾਹਰਣ 3

ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ ਖਾਲੀ ਜਗ੍ਹਾ ਦੀ ਬੁਰਾਈ ਦਿਸਾਈ ਗਈ ਹੈ。

ਪ੍ਰਯਤਨ ਕਰੋ "myDIV" ਦੇ ਪਹਿਲੇ ਸਬ-ਨੋਡ ਦੇ ਨੋਡ ਨਾਮ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰਨਾ:

<div id="myDIV">
  <p>Looks like first child</p>
  <p>Looks like last Child</p>
</div>
<script>
let text = document.getElementById("myDIV").firstChild.nodeName;
</script>

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

ਉਦਾਹਰਣ 4

ਪਰ ਜੇਕਰ ਤੁਸੀਂ ਸਰੋਤ ਵਿੱਚ ਖਾਲੀ ਜਗ੍ਹਾ ਹਟਾ ਦੇਓ, ਤਾਂ "myDIV" ਵਿੱਚ #text ਨੋਡ ਨਹੀਂ ਹੈ:

<div id="myDIV"><p>First child</p><p>Last Child</p></div>
<script>
let text = document.getElementById("myDIV").firstChild.nodeName;
</script>

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

HTML ਨੋਡ ਅਤੇ ਏਲੀਮੈਂਟ

ਵਿੱਚ HTML DOM（ਦਸਤਾਵੇਜ਼ ਆਬਜੈਕਟ ਮਾਡਲ） ਵਿੱਚ، HTML ਦਸਤਾਵੇਜ਼ ਉਪ ਸ਼ਾਖਾ ਵਾਲੇ (ਜਾਂ ਨਹੀਂ ਵਾਲੇ) ਨੋਡ ਦਾ ਸਮੂਹ ਹੈ。

ਨੋਡਏਲੀਮੈਂਟ ਨੋਡ, ਟੈਕਸਟ ਨੋਡ ਅਤੇ ਟਿੱਪਣੀ ਨੋਡ ਹੈ。

ਏਲੀਮੈਂਟਉਪ ਤੱਤ ਵਿਚਕਾਰ ਦਾ ਖਾਲੀ ਜਗ੍ਹਾ ਵੀ ਟੈਕਸਟ ਨੋਡ ਹੈ。

ਏਲੀਮੈਂਟ ਸਿਰਫ ਏਲੀਮੈਂਟ ਨੋਡ ਹੈ。

ਉਪ ਨੋਡ ਅਤੇ ਉਪ ਤੱਤ

childNodes ਵਾਪਸ ਦਿੱਤਾ ਜਾਂਦਾ ਹੈਉਪ ਨੋਡ（ਏਲੀਮੈਂਟ ਨੋਡ, ਟੈਕਸਟ ਨੋਡ ਅਤੇ ਟਿੱਪਣੀ ਨੋਡ）。

children ਵਾਪਸ ਦਿੱਤਾ ਜਾਂਦਾ ਹੈਉਪ ਤੱਤ（ਨਹੀਂ ਟੈਕਸਟ ਅਤੇ ਟਿੱਪਣੀ ਨੋਡ）。

firstChild ਅਤੇ firstElementChild

firstChild ਪਹਿਲੀ ਨੂੰ ਵਾਪਸ ਦਿੱਤਾ ਜਾਂਦਾ ਹੈਉਪ ਨੋਡ（ਏਲੀਮੈਂਟ ਨੋਡ, ਟੈਕਸਟ ਨੋਡ ਜਾਂ ਟਿੱਪਣੀ ਨੋਡ）。ਏਲੀਮੈਂਟ ਵਿਚਕਾਰ ਦਾ ਖਾਲੀ ਜਗ੍ਹਾ ਵੀ ਟੈਕਸਟ ਨੋਡ ਹੈ。

firstElementChild ਪਹਿਲੀ ਨੂੰ ਵਾਪਸ ਦਿੱਤਾ ਜਾਂਦਾ ਹੈਉਪ ਤੱਤ（ਟੈਕਸਟ ਨੋਡ ਅਤੇ ਟਿੱਪਣੀ ਨੋਡ ਨਹੀਂ ਵਾਪਸ ਦਿੱਤੇ ਜਾਂਦੇ ਹਨ）。

lastChild ਅਤੇ lastElementChild

lastChild ਆਖਰੀ ਨੂੰ ਵਾਪਸ ਦਿੱਤਾ ਜਾਂਦਾ ਹੈਉਪ ਨੋਡ（ਏਲੀਮੈਂਟ ਨੋਡ, ਟੈਕਸਟ ਨੋਡ ਜਾਂ ਟਿੱਪਣੀ ਨੋਡ）。ਏਲੀਮੈਂਟ ਵਿਚਕਾਰ ਦਾ ਖਾਲੀ ਜਗ੍ਹਾ ਵੀ ਟੈਕਸਟ ਨੋਡ ਹੈ。

lastElementChild ਆਖਰੀ ਨੂੰ ਵਾਪਸ ਦਿੱਤਾ ਜਾਂਦਾ ਹੈਉਪ ਤੱਤ（ਟੈਕਸਟ ਨੋਡ ਅਤੇ ਟਿੱਪਣੀ ਨੋਡ ਨਹੀਂ ਵਾਪਸ ਦਿੱਤੇ ਜਾਂਦੇ ਹਨ）。

ਵਿਆਕਰਣ

element.firstChild

ਜਾਂ

node.firstChild

ਵਾਪਸ ਦਿੱਤਾ ਗਿਆ ਮੁੱਲ

ਇਸ਼ਤਿਹਾਰ ਵਰਣਨ
ਨੋਡ

ਨੋਡ ਦੀ ਪਹਿਲੀ ਉਪ ਸ਼ਾਖਾ

ਜੇਕਰ ਕੋਈ ਉਪ ਸ਼ਾਖਾ ਨਹੀਂ ਹੈ, ਤਾਂ null ਵਾਪਸ ਦਿੱਤਾ ਜਾਵੇਗਾ。

ਬਰਾਉਜ਼ਰ ਸਮਰਥਨ

element.firstChild ਇਹ DOM Level 1 (1998) ਵਿਸ਼ੇਸ਼ਤਾ ਹੈ。

ਸਾਰੇ ਬਰਾਉਜ਼ਰ ਇਸ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਮਰਥਤ ਕਰਦੇ ਹਨ:

ਚਰਮੋਗਾਰਨ ਆਈਈ ਐਜ਼ ਫਾਇਰਫਾਕਸ ਸੈਫਾਰੀ ਓਪਰਾ
ਚਰਮੋਗਾਰਨ ਆਈਈ ਐਜ਼ ਫਾਇਰਫਾਕਸ ਸੈਫਾਰੀ ਓਪਰਾ
ਸਮਰਥਨ 9-11 ਸਮਰਥਨ ਸਮਰਥਨ ਸਮਰਥਨ ਸਮਰਥਨ