Was ist der Unterschied zwischen textContent
und innerText
in JavaScript?
Kann ich textContent
wie folgt verwenden:
var logo$ = document.getElementsByClassName('logo')[0];
logo$.textContent = "Example";
quelle
Was ist der Unterschied zwischen textContent
und innerText
in JavaScript?
Kann ich textContent
wie folgt verwenden:
var logo$ = document.getElementsByClassName('logo')[0];
logo$.textContent = "Example";
Keine der anderen Antworten liefert die vollständige Erklärung, daher diese. Die wichtigsten Unterschiede zwischen innerText
und textContent
werden in Kelly Nortons Blogpost sehr gut umrissen : innerText vs. textContent . Nachfolgend finden Sie eine Zusammenfassung:
innerText
war nicht Standard, während textContent
früher standardisiert wurde.innerText
Gibt den sichtbaren Text zurück, der in einem Knoten enthalten ist, während textContent
der vollständige Text zurückgegeben wird. Zum Beispiel auf der folgenden HTML <span>Hello <span style="display: none;">World</span></span>
, innerText
kehrt ‚Hallo‘, während textContent
kehrt ‚Hallo Welt‘. Eine vollständigere Liste der Unterschiede finden Sie in der Tabelle unter http://perfectionkills.com/the-poor-misunderstood-innerText/ (weitere Informationen unter 'innerText' funktionieren im IE, jedoch nicht in Firefox ).innerText
ist es viel leistungsintensiver: Es erfordert Layoutinformationen, um das Ergebnis zurückzugeben.innerText
ist nur für HTMLElement
Objekte definiert , während textContent
für alle Node
Objekte definiert ist .Eine textContent
Problemumgehung für in IE8- würde eine rekursive Funktion beinhalten, die nodeValue
auf allen childNodes
angegebenen Knoten verwendet wird. Hier ist ein Versuch mit einer Polyfüllung:
function textContent(rootNode) {
if ('textContent' in document.createTextNode(''))
return rootNode.textContent;
var childNodes = rootNode.childNodes,
len = childNodes.length,
result = '';
for (var i = 0; i < len; i++) {
if (childNodes[i].nodeType === 3)
result += childNodes[i].nodeValue;
else if (childNodes[i].nodeType === 1)
result += textContent(childNodes[i]);
}
return result;
}
innerText
schaltet <br>
Elemente in Zeilenumbrüche, während textContent
wird einfach ignorieren. Also werden 2 Wörter mit nur einem <br>
Element dazwischen (und ohne Leerzeichen) bei der Verwendung verkettettextContent
elem.textContent = 'foobar'
vselem.innerText = 'foobar'
innerText
und textContent
: Wenn Sie das text-transform
eines Elements durch CSS ändern, wirkt sich dies auf das Ergebnis von 'innerText' aus, nicht jedoch auf das Ergebnis von textContent
. Zum Beispiel: innerText
von <div style="text-transform: uppercase;">Hello World</div>
wird "HALLO WORLD" sein, während textContent
"Hello World" sein wird.
textContent
ist der einzige verfügbare Textknoten:
var text = document.createTextNode('text');
console.log(text.innerText); // undefined
console.log(text.textContent); // text
innerText
Wertet in Elementknoten <br> Elemente aus, während textContent
Steuerzeichen ausgewertet werden:
var span = document.querySelector('span');
span.innerHTML = "1<br>2<br>3<br>4\n5\n6\n7\n8";
console.log(span.innerText); // breaks in first half
console.log(span.textContent); // breaks in second half
<span></span>
span.innerText
gibt:
1
2
3
4 5 6 7 8
span.textContent
gibt:
1234
5
6
7
8
Zeichenfolgen mit Steuerzeichen (z. B. Zeilenvorschübe) sind nicht verfügbar textContent
, wenn der Inhalt mit festgelegt wurde innerText
. Umgekehrt (Steuerzeichen setzen mit textContent
) werden alle Zeichen sowohl mit innerText
als auch zurückgegeben textContent
:
var div = document.createElement('div');
div.innerText = "x\ny";
console.log(div.textContent); // xy
Beide innerText
& textContent
sind ab 2016 standardisiert. Alle Node
Objekte (einschließlich Reintextknoten) haben textContent
, aber nur HTMLElement
Objekte haben innerText
.
Funktioniert zwar textContent
mit den meisten Browsern, funktioniert jedoch nicht mit IE8 oder früher. Verwenden Sie diese Polyfüllung, damit sie nur unter IE8 funktioniert. Diese Polyfüllung funktioniert nicht mit IE7 oder früher.
if (Object.defineProperty
&& Object.getOwnPropertyDescriptor
&& Object.getOwnPropertyDescriptor(Element.prototype, "textContent")
&& !Object.getOwnPropertyDescriptor(Element.prototype, "textContent").get) {
(function() {
var innerText = Object.getOwnPropertyDescriptor(Element.prototype, "innerText");
Object.defineProperty(Element.prototype, "textContent",
{
get: function() {
return innerText.get.call(this);
},
set: function(s) {
return innerText.set.call(this, s);
}
}
);
})();
}
Die Object.defineProperty
Methode ist in IE9 oder höher verfügbar, steht jedoch in IE8 nur für DOM-Objekte zur Verfügung.
https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent
innerText
dein Freund.
Object.defineProperty()
?
Für diejenigen, die diese Frage gegoogelt haben und hier angekommen sind. Ich denke, die klarste Antwort auf diese Frage findet sich im MDN-Dokument: https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent .
Sie können alle Punkte vergessen, die Sie verwirren könnten, aber denken Sie an zwei Dinge:
textContent
ist dies normalerweise die Eigenschaft, nach der Sie suchen.innerText
der Text angenähert, den der Benutzer erhalten würde, wenn er den Inhalt des Elements mit dem Cursor hervorhebt und dann in die Zwischenablage kopiert. Und textContent
gibt Ihnen alles, sichtbar oder versteckt, einschließlich <script>
und <style>
Elemente.textContent wird von den meisten Browsern unterstützt. Es wird von ie8 oder früher nicht unterstützt, es kann jedoch eine Polyfüllung verwendet werden
Die Eigenschaft textContent legt den Textinhalt des angegebenen Knotens und aller seiner Nachkommen fest oder gibt ihn zurück.
Siehe http://www.w3schools.com/jsref/prop_node_textcontent.asp
textContent gibt Volltext zurück und kümmert sich nicht um die Sichtbarkeit, während innerText dies tut.
<p id="source">
<style>#source { color: red; }</style>
Text with breaking<br>point.
<span style="display:none">HIDDEN TEXT</span>
</p>
Ausgabe von textContent:
#source { color: red; } Text with breakingpoint. HIDDEN TEXT
Ausgabe von innerText (beachten Sie, wie innerText Tags wie erkennt <br>
und versteckte Elemente ignoriert):
Text with breaking point.
Abgesehen von all den Unterschieden, die in den anderen Antworten genannt wurden, ist hier noch einer, den ich erst kürzlich entdeckt habe:
Obwohl die innerText
Eigenschaft seit 2016 standardisiert sein soll, weist sie Unterschiede zwischen den Browsern auf: Mozilla ignoriert U + 200E- und U + 200F-Zeichen ("lrm" und "rlm") innerText
, Chrome jedoch nicht.
console.log(document.getElementById('test').textContent.length);
console.log(document.getElementById('test').innerText.length);
<div id="test">[‎]</div>
Firefox meldet 3 und 2, Chrome meldet 3 und 3.
Ich bin mir noch nicht sicher, ob dies ein Fehler ist (und wenn ja, in welchem Browser) oder nur eine dieser skurrilen Inkompatibilitäten, mit denen wir leben müssen.
innerHTML führt sogar die HTML-Tags aus, die gefährlich sein können und jede Art von clientseitigem Injection-Angriff wie DOM-basiertes XSS verursachen. Hier ist das Code-Snippet:
<!DOCTYPE html>
<html>
<body>
<script>
var source = "Hello " + decodeURIComponent("<h1>Text inside gets executed as h1 tag HTML is evaluated</h1>"); //Source
var divElement = document.createElement("div");
divElement.innerHTML = source; //Sink
document.body.appendChild(divElement);
</script>
</body>
</html>
Wenn Sie .textContent verwenden, werden die HTML-Tags nicht ausgewertet und als Zeichenfolge gedruckt.
<!DOCTYPE html>
<html>
<body>
<script>
var source = "Hello " + decodeURIComponent("<h1>Text inside will not get executed as HTML</h1>"); //Source
var divElement = document.createElement("div");
divElement.textContent = source; //Sink
document.body.appendChild(divElement);
</script>
</body>
</html>
Referenz: https://www.scip.ch/en/?labs.20171214
innerText
undtextContent
sind entschieden nicht gleich. Leerzeichen im Knoteninhalt führen dazu, dass die beiden Eigenschaften unterschiedliche Inhalte ergeben, ebenso wie das Auftreten vonbr
Elementen und anderen auf Blockebene gerenderten Nachkommen.