JavaScript textContent-egenskapen fungerar för att ställa in och hämta sidans textinnehåll. Den används för att skicka och visa textinnehållet i viss information, taggar och stora datastorlekar och dess noder. TextContent varierar från nodeValue för skripttaggen och returnerar innehåll från underordnade noder av flera datatyper.
Om noden är en textnod, en bearbetningsinstruktion eller en tagganmärkning, hämtar eller ställer javascript textContent in texten. TextContent visar sammanlänkningen av textContent för varje underordnad nod. Den visar bearbetningsinstruktionerna och kommentarer till de andra nodtyperna.
Syntax
Det finns två syntaxer tillgängliga för JavaScript-textinnehållet. Den första syntaxen används för att ställa in texten för en nod, och den andra syntaxen används för att hämta nodens text.
Syntax 1:
Följande syntax används för att ställa in nodens text med hjälp av textinnehåll.
latex i fontstorlek
Node_element.textContent = information;
Syntax 2:
Följande syntax använder textinnehåll för att hämta nodens text.
Node_element.textContent;
Returvärde:
- En sträng innehåller texten för utgångsnoden och dess undernod. Utdata visar ett nollvärde om ett element är ett dokument eller en dokumenttyp.
- De underordnade noderna ersätts av en enda textnod med hjälp av uppsättningen textContent-attribut. Attributet har en specifik sträng som innehåll.
Exempel
Följande exempel visar uppsättningen och hämtar olika typer av information med hjälp av textContent-attributet.
Exempel 1
Följande exempel använder textinnehåll i javascriptet för att ställa in informationen. Noddata visar taggarnas text.
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('textContent_information'); ele.textContent = ' <i> JavaScript </i> <h2> Set or get the content of node </h2>'; } Produktion
Följande bild visar uppsättningen av data med hjälp av innehållsnoden.
java-operatörsföreträde
Exempel 2
Följande exempel använder textinnehåll i javascriptet för att få informationen. Vi kan få värdet av klickfunktionens knapp.
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('myData1').textContent; function fdisplay() { document.getElementById('textContent_information').textContent = text_in; } Produktion
Följande bild visar uppsättningen av data med hjälp av innehållsnoden.
Exempel 3
Följande exempel använder textinnehåll i javascriptet för att få informationen. Vi kan få värdet av klickfunktionens knapp.
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('value').textContent; document.getElementById('textContent_information').textContent = text_in; } Produktion
Följande bild visar uppsättningen av data med hjälp av innehållsnoden.
Exempel4
Följande exempel använder textinnehåll på knappvärdet för att hämta och ställa in informationen. Vi kan få värdet efter att ha klickat på knappen.
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('value').textContent = 'the information of the node has been changed using click function!'; var text_in = document.getElementById('info').textContent; document.getElementById('values').textContent = text_in; } Produktion
Följande bild visar uppsättningen av data med hjälp av innehållsnoden.
Exempel 5
Följande exempel används för att hämta och ställa in informationen med hjälp av innerHtml, innerText och textinnehåll på knappvärdet. Vi kan få skillnaden i utdata efter att ha klickat på knappen.
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('finfo').innerHTML = ' <b> textContent in JavaScript using node </b> the information of the node has been changed using click function!'; } function sdisplay() { document.getElementById('sinfo').innerText = ' <b> textContent in JavaScript using node </b> <br> the information of the node has been changed using click function!'; } function tdisplay() { document.getElementById('tinfo').textContent = ' <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!'; } Produktion
Följande bild visar uppsättningen av data med hjälp av innehållsnoden.
Exempel 6
Följande exempel används för att hämta listdata och ställa in informationen med hjälp av textinnehåll på onclick-knappens värde. Vi kan få information om listan och annan tagginformation.
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('students').textContent; document.getElementById('tinfo').textContent = students; } Produktion
Följande bild visar uppsättningen av data med hjälp av innehållsnoden.
Exempel 7
"kruskals algoritm"
Textinnehållet stöder inte tomma data om information eller sträng är tom. Den visar den tomma strängen som ett värde.
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('students').textContent; console.log(students); if(students != ''){ document.getElementById('tinfo').textContent = 'child node does not available of the student parent node.'; }else{ document.getElementById('tinfo').textContent = 'child node is available of the student parent node.'; } } Produktion
Följande bild visar noden för att hämta data med textinnehåll.
Nyckelpunkt för textinnehållet i javascript
- När JavaScript-information automatiskt tar bort HTML är användningen av textContent säker.
- Textinnehållet och informationen inkluderar mellanrummen och de inre elementtaggarna. InnerHTML-attributet returnerar det.
- Attributet innerText returnerar endast text utan mellanslag eller inre elementtaggar. Egenskapen textContent returnerar text som innehåller mellanslag men exkluderar inre elementtaggar.
- Värdena för alla textnoder i underträdet kombineras och ställs in för textinnehåll och hämtas från textinnehållet. Om en nod inte har några barn är strängen tom.
- InnerText returnerar text som är läsbar för människor och tar in i valfri CSS. Textinnehållet är svårt att läsa när html-taggar används i datan.
- När en egenskap är inställd på en nod tas alla dess underordnade bort, och en enda textnod tar dess plats med det angivna värdet.
Slutsats
Textinnehållet visar flera typer av information. HTML-taggen krävde information och listdata som visas med en enda metod.