Właściwość JavaScript textContent ustawia i pobiera zawartość tekstową strony. Służy do przekazywania i wyświetlania zawartości tekstowej niektórych informacji, znaczników oraz dużych rozmiarów danych i ich węzłów. TextContent różni się od wartości węzła tagu skryptu i zwraca treść z węzłów podrzędnych wielu typów danych.

Jeśli węzeł jest węzłem tekstowym, instrukcją przetwarzania lub uwagą do znacznika, wówczas javascript textContent pobiera lub ustawia tekst. TextContent pokazuje połączenie treści tekstowej każdego węzła podrzędnego. Pokazuje instrukcje przetwarzania i komentarze do innych typów węzłów.

Składnia

Dostępne są dwie składnie treści tekstowej JavaScript. Pierwsza składnia służy do ustawiania tekstu węzła, a druga składnia służy do pobierania tekstu węzła.

Składnia 1:

Poniższa składnia służy do ustawiania tekstu węzła przy użyciu zawartości tekstowej.

klasa skanera Java

 Node_element.textContent = information; 

Składnia 2:

Następująca składnia wykorzystuje zawartość tekstową do pobrania tekstu węzła.

 Node_element.textContent; 

Wartość zwracana:

• Ciąg zawiera tekst węzła wyjściowego i jego węzła podrzędnego. Dane wyjściowe pokazują wartość null, jeśli element jest dokumentem lub typem dokumentu.
• Węzły podrzędne są zastępowane pojedynczym węzłem tekstowym przy użyciu zestawu atrybutów textContent. Atrybut ma określoną treść jako treść.

Przykłady

Poniższe przykłady pokazują zestaw i pobierają różne rodzaje informacji za pomocą atrybutu textContent.

Przykład 1

W poniższym przykładzie użyto treści tekstowej w JavaScript do ustawienia informacji. Dane węzła pokazują tekst znaczników.

 textContent in JavaScript using node <h3> textContent in JavaScript using node </h3> <h4> Set node information for child javascript nodes</h4> Click Here! function display() { var ele = document.getElementById(&apos;textContent_information&apos;); ele.textContent = &apos; <i> JavaScript </i> <h2> Set or get the content of node </h2>&apos;; } 

Wyjście

Poniższy obraz przedstawia zestaw danych przy użyciu węzła treści.

ustawienie ścieżki Pythona

Przykład 2

Poniższy przykład wykorzystuje treść tekstową w JavaScript, aby uzyskać informacje. Możemy uzyskać wartość przycisku funkcji kliknięcia.

 textContent in JavaScript using node <h3> textContent in JavaScript using node </h3> <h4> Get node information for child javascript nodes </h4> Get node information for child javascript nodes <br> Click the Button! var text_in = document.getElementById(&apos;myData1&apos;).textContent; function fdisplay() { document.getElementById(&apos;textContent_information&apos;).textContent = text_in; } 

Wyjście

Poniższy obraz przedstawia zestaw danych przy użyciu węzła treści.

Przykład 3

Poniższy przykład wykorzystuje treść tekstową w JavaScript, aby uzyskać informacje. Możemy uzyskać wartość przycisku funkcji kliknięcia.

 textContent in JavaScript using node <h3> textContent in JavaScript using node </h3> <h4> Set node information for child javascript nodes </h4> Click the Button! function fdisplay() { var text_in = document.getElementById(&apos;value&apos;).textContent; document.getElementById(&apos;textContent_information&apos;).textContent = text_in; } 

Wyjście

Poniższy obraz przedstawia zestaw danych przy użyciu węzła treści.

Przykład 4

W poniższym przykładzie użyto treści tekstowej na wartości przycisku, aby uzyskać i ustawić informacje. Wartość możemy uzyskać po kliknięciu przycisku.

 textContent in JavaScript using node <h3> textContent in JavaScript using node </h3> <p id="info"> Get node information for child javascript nodes </p> Click the Button! <br> See the value! function fdisplay() { document.getElementById(&apos;value&apos;).textContent = &apos;the information of the node has been changed using click function!&apos;; var text_in = document.getElementById(&apos;info&apos;).textContent; document.getElementById(&apos;values&apos;).textContent = text_in; } 

Wyjście

Poniższy obraz przedstawia zestaw danych przy użyciu węzła treści.

Przykład 5

Poniższy przykład służy do pobierania i ustawiania informacji przy użyciu internalHtml, internalText i zawartości tekstowej na wartości przycisku. Różnicę w danych wyjściowych możemy uzyskać po kliknięciu przycisku.

 textContent in JavaScript using node <h3> The textContent in JavaScript using node </h3> <p> Get node information for child javascript nodes </p> Click the innerHtml Button! Click the innerText Button! Click the textcontent Button! function fdisplay() { document.getElementById(&apos;finfo&apos;).innerHTML = &apos; <b> textContent in JavaScript using node </b> the information of the node has been changed using click function!&apos;; } function sdisplay() { document.getElementById(&apos;sinfo&apos;).innerText = &apos; <b> textContent in JavaScript using node </b> <br> the information of the node has been changed using click function!&apos;; } function tdisplay() { document.getElementById(&apos;tinfo&apos;).textContent = &apos; <b> textContent in JavaScript using node </b> <br> textContent in JavaScript using node <br> the information of the node has been changed using click function!&apos;; } 

Wyjście

Poniższy obraz przedstawia zestaw danych przy użyciu węzła treści.

Przykład 6

liczba pierwsza java

Poniższy przykład służy do pobierania danych z listy i ustawiania informacji przy użyciu zawartości tekstowej na wartości przycisku onclick. Możemy uzyskać dane z listy i inne informacje o tagach.

 textContent in JavaScript using node <h3> The textContent in JavaScript using node </h3> <p> Get node information for child javascript nodes </p> <ul id="students"> <li id="std1">David</li> <li id="std2">Sai</li> <li id="std3">Ruta</li> <li id="std4">Saniya</li> <li id="std5">Kevin</li> </ul> Click the textcontent Button! function tdisplay() { var students = document.getElementById(&apos;students&apos;).textContent; document.getElementById(&apos;tinfo&apos;).textContent = students; } 

Wyjście

Poniższy obraz przedstawia zestaw danych przy użyciu węzła treści.

Przykład 7

Treść tekstowa nie obsługuje pustych danych, jeśli informacja lub ciąg znaków są puste. Pokazuje pusty ciąg jako wartość.

 textContent in JavaScript using node <h3> The textContent in JavaScript using node </h3> <p> Get node information for child javascript nodes </p> <ul id="students"> </ul> Click the textcontent Button! function tdisplay() { var students = document.getElementById(&apos;students&apos;).textContent; console.log(students); if(students != &apos;&apos;){ document.getElementById(&apos;tinfo&apos;).textContent = &apos;child node does not available of the student parent node.&apos;; }else{ document.getElementById(&apos;tinfo&apos;).textContent = &apos;child node is available of the student parent node.&apos;; } } 

Wyjście

Poniższy obraz przedstawia pobieranie danych przy użyciu węzła treści tekstowej.

Kluczowy punkt treści tekstowej w javascript

• Gdy informacje JavaScript automatycznie usuwają kod HTML, wykorzystanie treści tekstowych jest bezpieczne.
• Treść i informacje tekstowe obejmują spacje i znaczniki elementów wewnętrznych. Atrybut internalHTML zwróci go.
• Atrybut internalText zwraca tylko tekst bez spacji i znaczników elementów wewnętrznych. Właściwość textContent zwraca tekst zawierający spacje, ale wykluczający znaczniki elementów wewnętrznych.
• Wartości wszystkich węzłów tekstowych w poddrzewie są łączone i ustawiane dla treści tekstowej i pobierane z treści tekstowej. Jeśli węzeł nie ma żadnych dzieci, ciąg znaków jest pusty.
• InternalText zwraca tekst, który jest czytelny dla człowieka i uwzględnia dowolny CSS. Treść tekstowa jest trudna do odczytania, jeśli w danych zastosowano znaczniki HTML.
• Kiedy właściwość jest ustawiona w węźle, wszystkie jej elementy podrzędne są usuwane, a na jej miejsce pojawia się pojedynczy węzeł tekstowy z określoną wartością.

Wniosek

Treść tekstowa wyświetla wiele rodzajów informacji. Znacznik HTML wymagał informacji i danych listowych pokazanych przy użyciu jednej metody.