Vlastnost textContent v JavaScriptu slouží k nastavení a získání textového obsahu stránky. Používá se k předání a zobrazení textového obsahu některých informací, značek a velké velikosti dat a jejich uzlů. TextContent se liší od nodeValue značky script a vrací obsah z podřízených uzlů různých datových typů.

Pokud je uzel textový uzel, instrukce pro zpracování nebo poznámka ke značce, pak javascript textContent získá nebo nastaví text. TextContent ukazuje zřetězení textContent každého podřízeného uzlu. Zobrazuje pokyny pro zpracování a komentáře pro ostatní typy uzlů.

Syntax

Pro textový obsah JavaScriptu jsou k dispozici dvě syntaxe. První syntaxe se používá k nastavení textu uzlu a druhá syntaxe se používá k načtení textu uzlu.

Syntaxe 1:

Následující syntaxe se používá k nastavení textu uzlu pomocí textového obsahu.

sčítačka plná sčítačka

 Node_element.textContent = information; 

Syntaxe 2:

Následující syntaxe používá k získání textu uzlu textový obsah.

 Node_element.textContent; 

Návratová hodnota:

• Řetězec obsahuje text výstupního uzlu a jeho podřízeného uzlu. Výstup zobrazuje hodnotu null, pokud je prvkem dokument nebo typ dokumentu.
• Podřízené uzly jsou nahrazeny jedním textovým uzlem pomocí sady atributu textContent. Atribut má jako obsah specifický řetězec.

Příklady

Následující příklady ukazují sadu a získejte různé typy informací pomocí atributu textContent.

Příklad 1

Následující příklad používá k nastavení informací textový obsah v javascriptu. Data uzlů zobrazují text značek.

 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;; } 

Výstup

Následující obrázek ukazuje sadu dat pomocí uzlu obsahu.

Příklad 2

Následující příklad používá k získání informací textový obsah v javascriptu. Můžeme získat hodnotu tlačítka funkce kliknutí.

 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; } 

Výstup

řetězec pro char v Javě

Následující obrázek ukazuje sadu dat pomocí uzlu obsahu.

Příklad 3

Následující příklad používá k získání informací textový obsah v javascriptu. Můžeme získat hodnotu tlačítka funkce kliknutí.

 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; } 

Výstup

Následující obrázek ukazuje sadu dat pomocí uzlu obsahu.

Příklad4

Následující příklad používá textový obsah na hodnotě tlačítka k získání a nastavení informací. Hodnotu získáme po kliknutí na tlačítko.

 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; } 

Výstup

Následující obrázek ukazuje sadu dat pomocí uzlu obsahu.

Příklad5

Následující příklad používá k získání a nastavení informací pomocí innerHtml, innerText a textového obsahu na hodnotě tlačítka. Rozdíl ve výstupních datech získáme po kliknutí na tlačítko.

 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;; } 

Výstup

Následující obrázek ukazuje sadu dat pomocí uzlu obsahu.

Příklad 6

Následující příklad používá k získání dat seznamu a nastavení informací pomocí textového obsahu na hodnotu tlačítka onclick. Můžeme získat data seznamu a další informace o značkách.

C++ gui

 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; } 

Výstup

Následující obrázek ukazuje sadu dat pomocí uzlu obsahu.

Příklad 7

Textový obsah nepodporuje prázdná data, pokud jsou informace nebo řetězec prázdné. Zobrazuje prázdný řetězec jako hodnotu.

 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;; } } 

Výstup

Následující obrázek ukazuje získávání dat pomocí uzlu textového obsahu.

Klíčový bod textového obsahu v javascriptu

• Když javascriptové informace automaticky odstraní HTML, pak je použití textContent bezpečné.
• Textový obsah a informace zahrnují mezery a značky vnitřních prvků. Atribut innerHTML jej vrátí.
• Atribut innerText vrací pouze text bez mezer nebo značek vnitřních prvků. Vlastnost textContent vrací text, který obsahuje mezery, ale vylučuje značky vnitřních prvků.
• Hodnoty všech textových uzlů v podstromu se zkombinují a nastaví pro textový obsah a získají se z textového obsahu. Pokud uzel nemá žádné potomky, je řetězec prázdný.
• Vnitřní text vrací text, který je pro člověka čitelný a přebírá jakýkoli CSS. Textový obsah je obtížně čitelný, když jsou v datech použity html tagy.
• Když je vlastnost nastavena na uzel, všechny její potomky jsou odstraněny a místo něj se zadanou hodnotou nastupuje jeden textový uzel.

Závěr

Textový obsah zobrazuje různé typy informací. Značka html vyžadovala informace a seznam dat zobrazených pomocí jediné metody.