Mit der JavaScript-Eigenschaft textContent können Sie den Textinhalt der Seite festlegen und abrufen. Es wird verwendet, um den Textinhalt einiger Informationen, Tags und großer Datenmengen und ihrer Knoten zu übergeben und anzuzeigen. Der TextContent unterscheidet sich vom nodeValue des Skript-Tags und gibt Inhalte von untergeordneten Knoten der mehreren Datentypen zurück.
Wenn es sich bei dem Knoten um einen Textknoten, eine Verarbeitungsanweisung oder eine Tag-Bemerkung handelt, ruft Javascript textContent den Text ab oder legt ihn fest. Der TextContent zeigt die Verkettung des TextContent jedes untergeordneten Knotens. Es zeigt die Verarbeitungsanweisungen und Kommentare zu den anderen Knotentypen.
Syntax
Für den JavaScript-Textinhalt stehen zwei Syntaxen zur Verfügung. Mit der ersten Syntax wird der Text eines Knotens festgelegt und mit der zweiten Syntax wird der Text des Knotens abgerufen.
Syntax 1:
Mit der folgenden Syntax wird der Text des Knotens mithilfe von Textinhalten festgelegt.
Java-Wert der Enumeration
Node_element.textContent = information;
Syntax 2:
Die folgende Syntax verwendet Textinhalt, um den Text des Knotens abzurufen.
Node_element.textContent;
Rückgabewert:
- Eine Zeichenfolge enthält den Text des Ausgabeknotens und seines untergeordneten Knotens. Die Ausgabe zeigt einen Nullwert, wenn es sich bei einem Element um ein Dokument oder einen Dokumenttyp handelt.
- Die untergeordneten Knoten werden mithilfe des Satzes des textContent-Attributs durch einen einzelnen Textknoten ersetzt. Das Attribut hat als Inhalt eine bestimmte Zeichenfolge.
Beispiele
Die folgenden Beispiele zeigen den Satz und rufen die verschiedenen Arten von Informationen mithilfe des textContent-Attributs ab.
Beispiel 1
Das folgende Beispiel verwendet Textinhalte im Javascript, um die Informationen festzulegen. Die Knotendaten zeigen den Text der Tags.
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>'; } Ausgabe
Das folgende Bild zeigt das Festlegen der Daten mithilfe des Inhaltsknotens.
Beispiel 2
Das folgende Beispiel verwendet Textinhalte im Javascript, um die Informationen abzurufen. Wir können den Wert der Schaltfläche der Klickfunktion ermitteln.
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; } Ausgabe
Das folgende Bild zeigt das Festlegen der Daten mithilfe des Inhaltsknotens.
Beispiel 3
Das folgende Beispiel verwendet Textinhalte im Javascript, um die Informationen abzurufen. Wir können den Wert der Schaltfläche der Klickfunktion ermitteln.
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; } Ausgabe
Das folgende Bild zeigt das Festlegen der Daten mithilfe des Inhaltsknotens.
Beispiel4
NullpointerException
Im folgenden Beispiel wird Textinhalt für den Schaltflächenwert verwendet, um die Informationen abzurufen und festzulegen. Wir können den Wert erhalten, nachdem wir auf die Schaltfläche geklickt haben.
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; } Ausgabe
Das folgende Bild zeigt das Festlegen der Daten mithilfe des Inhaltsknotens.
Beispiel5
Im folgenden Beispiel werden die Informationen mithilfe von innerHtml, innerText und Textinhalten für den Schaltflächenwert abgerufen und festgelegt. Wir können den Unterschied in den Ausgabedaten ermitteln, nachdem wir auf die Schaltfläche geklickt haben.
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!'; } Ausgabe
Das folgende Bild zeigt das Festlegen der Daten mithilfe des Inhaltsknotens.
was ist 25 von 100
Beispiel 6
Im folgenden Beispiel werden die Listendaten abgerufen und die Informationen mithilfe von Textinhalten für den Wert der Schaltfläche „onclick“ festgelegt. Wir können die Daten der Liste und andere Tag-Informationen abrufen.
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; } Ausgabe
Das folgende Bild zeigt das Festlegen der Daten mithilfe des Inhaltsknotens.
Beispiel 7
Der Textinhalt unterstützt keine leeren Daten, wenn Informationen oder Zeichenfolge leer sind. Es zeigt die leere Zeichenfolge als Wert an.
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.'; } } Ausgabe
Das folgende Bild zeigt den Knoten „Daten mithilfe von Textinhalten abrufen“.
Kernpunkt des Textinhalts in Javascript
- Wenn Javascript-Informationen automatisch HTML entfernen, ist die Verwendung von textContent sicher.
- Der Textinhalt und die Informationen umfassen die Leerzeichen und die inneren Element-Tags. Das innerHTML-Attribut gibt es zurück.
- Das innerText-Attribut gibt nur Text ohne Leerzeichen oder innere Element-Tags zurück. Die textContent-Eigenschaft gibt Text zurück, der Leerzeichen, aber innere Element-Tags ausschließt.
- Die Werte aller Textknoten im Teilbaum werden kombiniert und für den Textinhalt festgelegt und aus dem Textinhalt abgeleitet. Wenn ein Knoten keine untergeordneten Knoten hat, ist die Zeichenfolge leer.
- Der innerText gibt Text zurück, der für Menschen lesbar ist und in jedes CSS übernommen werden kann. Der Textinhalt ist schwer zu lesen, wenn in den Daten HTML-Tags verwendet werden.
- Wenn eine Eigenschaft für einen Knoten festgelegt wird, werden alle seine untergeordneten Knoten entfernt und ein einzelner Textknoten nimmt seinen Platz mit dem angegebenen Wert ein.
Abschluss
Der Textinhalt zeigt mehrere Arten von Informationen an. Das HTML-Tag erforderte Informationen und Listendaten, die mit einer einzigen Methode angezeigt wurden.