HTML DOM Element textContent ਗੁਣ

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

textContent ਗੁਣ ਸੈਟ ਕਰੋ ਜਾਂ ਵਾਪਸ ਦੇਵੋ, ਤਾਂ ਇਹ ਗੁਣ ਨਿਰਦਿਸ਼ਟ ਬੁਨਿਆਦੀ ਈਲੀਮੈਂਟ ਦੇ ਟੈਕਸਟ ਕੰਟੈਂਟ ਨੂੰ ਅਤੇ ਇਸਦੇ ਸਾਰੇ ਪੀੜ੍ਹੀਆਂ ਦੇ ਟੈਕਸਟ ਨੂੰ ਵਾਪਸ ਦੇਵੇਗਾ。

ਜੇਕਰ ਤੁਸੀਂ textContent ਗੁਣ, ਸਾਰੇ ਉਪ ਬੁਨਿਆਦੀ ਈਲੀਮੈਂਟਾਂ ਨੂੰ ਮਿਟਾ ਕੇ ਇੱਕ ਅਲੱਗ ਟੈਕਸਟ ਨੂੰ ਬਦਲ ਦੇਵੇਗਾ。

ਸੁਝਾਅ:ਕਦੇ-ਕਦੇ, ਇਹ ਗੁਣ nodeValue ਗੁਣ ਦੀ ਥਾਂ ਵਿੱਚ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ, ਲੇਕਿਨ ਧਿਆਨ ਰੱਖੋ ਕਿ ਇਹ ਗੁਣ ਸਾਰੇ ਉਪ ਬੁਨਿਆਦੀ ਈਲੀਮੈਂਟਾਂ ਦਾ ਟੈਕਸਟ ਵੀ ਵਾਪਸ ਦੇਵੇਗਾ。

ਹੋਰ ਜਾਣਕਾਰੀ:

innerText ਗੁਣ

innerHTML ਗੁਣ

ਇੰਸਟੈਂਸ

ਉਦਾਹਰਣ 1

ਈਲੀਮੈਂਟ ਦੇ ਟੈਕਸਟ ਕੰਟੈਂਟ ਨੂੰ ਵਾਪਸ ਦੇਵੋ:

let text = element.textContent;

ਆਪਣੇ ਆਪ ਸਿਖਰ ਦੇਖੋ

ਉਦਾਹਰਣ 2

id="demo" ਦੇ <p> ਈਲੀਮੈਂਟ ਦੇ ਟੈਕਸਟ ਕੰਟੈਂਟ ਨੂੰ ਬਦਲੋ:

element.textContent = "I have changed!";

ਆਪਣੇ ਆਪ ਸਿਖਰ ਦੇਖੋ

ਉਦਾਹਰਣ 3

ਜਿੰਨਾ ਵੀ id="myList" ਦਾ <ul> ਈਲੀਮੈਂਟ ਦਾ ਸਾਰਾ ਟੈਕਸਟ ਕੰਟੈਂਟ ਪ੍ਰਾਪਤ ਕਰੋ:

let text = document.getElementById("myList").textContent;

ਆਪਣੇ ਆਪ ਸਿਖਰ ਦੇਖੋ

ਸਿਫਟਰ

ਨੋਡ ਦੇ ਟੈਕਸਟ ਸਮੱਗਰੀ ਨੂੰ ਵਾਪਸ ਦਿੰਦਾ ਹੈ:

ਇਲੈਕਟਰਨ.textContent

ਜਾਂ

ਨੋਡ.textContent

ਨੋਡ ਦੇ ਟੈਕਸਟ ਸਮੱਗਰੀ ਨੂੰ ਸੈਟ ਕਰੋ:

ਇਲੈਕਟਰਨ.textContent = text
ਨੋਡ.textContent = text

ਪ੍ਰਤੀਯੋਗਿਤਾ ਮੁੱਲ

ਮੁੱਲ ਵਰਣਨ
text ਇਲੈਕਟਰਨ ਜਾਂ ਨੋਡ ਦਾ ਟੈਕਸਟ ਸਮੱਗਰੀ

ਵਾਪਸ ਦਿੰਦਾ ਹੈ

ਇਨਪੁਟ ਟਾਈਪ ਵਰਣਨ
ਸਟਰਿੰਗ

ਇਲੈਕਟਰਨ ਅਤੇ ਸਾਰੇ ਉਤਰਦਾਂ ਦਾ ਟੈਕਸਟ ਸਮੱਗਰੀ

ਜੇਕਰ ਇਲੈਕਟਰਨ document, document type ਜਾਂ notation ਹੈ ਤਾਂ null ਵਾਪਸ ਦਿੰਦਾ ਹੈ。

innerHTML, innerText ਅਤੇ textContent ਦਾ ਅੰਤਰ

innerText ਪ੍ਰਤੀਯੋਗਿਤਾ ਵਾਪਸ ਦਿੰਦਾ ਹੈ:

ਸਿਰਫ ਇਲੈਕਟਰਨ ਅਤੇ ਸਾਰੇ ਉਤਰਦਾਂ ਦਾ ਟੈਕਸਟ ਸਮੱਗਰੀ ਵਾਪਸ ਦਿੰਦਾ ਹੈ, ਨਾ ਕੇਂਦਰਿਤ ਛੁਪੇ ਟੈਕਸਟ ਅੰਤਰ ਅਤੇ ਟੈਗ, ਮੱਗਰ ਛੇਤੀ ਕੋਡ ਅਤੇ ਸਟਾਈਲ ਇਲੈਕਟਰਨ ਦੇ ਬਿਨਾ ਹੈ。

innerHTML ਪ੍ਰਤੀਯੋਗਿਤਾ ਵਾਪਸ ਦਿੰਦਾ ਹੈ:

ਇਲੈਕਟਰਨ ਦਾ ਟੈਕਸਟ ਸਮੱਗਰੀ, ਸਾਰੇ ਖਾਲੀ ਅਤੇ ਅੰਦਰੂਨੀ HTML ਟੈਗ ਸਮੇਤ ਹੈ。

textContent ਪ੍ਰਤੀਯੋਗਿਤਾ ਵਾਪਸ ਦਿੰਦਾ ਹੈ:

ਇਲੈਕਟਰਨ ਅਤੇ ਸਾਰੇ ਉਤਰਦਾਂ ਦਾ ਟੈਕਸਟ ਸਮੱਗਰੀ, ਖਾਲੀ ਅਤੇ CSS ਛੁਪੇ ਟੈਕਸਟ ਨਾਲ, ਲੇਕਿਨ ਟੈਗ ਦੇ ਬਿਨਾ ਹੈ。

HTML ਉਦਾਹਰਣ

<p id="myP">   This element has extra spacing     and contains <span>a span element</span>.</p>

JavaScript ਉਦਾਹਰਣ

let text = document.getElementById("myP").innerText;
let text = document.getElementById("myP").innerHTML;
let text = document.getElementById("demo").textContent;

ਆਪਣੇ ਆਪ ਸਿਖਰ ਦੇਖੋ

ਉੱਪਰੋਕਤ ਉਦਾਹਰਣ ਵਿੱਚ:

innerText ਪ੍ਰਤੀਯੋਗਿਤਾ ਵਾਪਸ ਦਿੰਦਾ ਹੈ:

This element has extra spacing and contains a span element.

innerHTML ਪ੍ਰਤੀਯੋਗਿਤਾ ਵਾਪਸ ਦਿੰਦਾ ਹੈ:

   This element has extra spacing    and contains <span>a span element</span>.

textContent ਪ੍ਰਤੀਯੋਗਿਤਾ ਵਾਪਸ ਦਿੰਦਾ ਹੈ:

   This element has extra spacing    and contains a span element.

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

element.textContent ਇਹ DOM Level 3 (2004) ਵਿਸ਼ੇਸ਼ਤਾ ਹੈ。

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

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
ਸਮਰਥਨ 9-11 ਸਮਰਥਨ ਸਮਰਥਨ ਸਮਰਥਨ ਸਮਰਥਨ