nodeValue vs innerHTML und textContent. Wie man wählt?

Ich verwende einfaches js, um den inneren Text eines Beschriftungselements zu ändern, und ich war mir nicht sicher, aus welchen Gründen ich innerHTML oder nodeValue oder textContent verwenden sollte. Ich muss keinen neuen Knoten erstellen oder die HTML-Elemente oder ähnliches ändern - ersetzen Sie einfach den Text. Hier ist ein Beispiel für den Code:

var myLabel = document.getElementById("#someLabel");
myLabel.innerHTML = "Some new label text!"; // this works

myLabel.firstChild.nodeValue = "Some new label text!"; // this also works.

myLabel.textContent = "Some new label text!"; // this also works.

Ich habe die jQuery-Quelle durchgesehen und sie verwendet nodeValue genau einmal, aber innerHTML und textContent mehrmals. Dann fand ich diesen jsperf-Test, der anzeigt, dass der firstChild.nodeValue deutlich schneller ist. Zumindest interpretiere ich das so.

Wenn firstChild.nodeValue so viel schneller ist, was ist der Haken? Wird es nicht allgemein unterstützt? Gibt es ein anderes Problem?

Unterschiede zwischen textContent / innerText / innerHTML auf MDN.

Und eine Stackoverflow-Antwort zu innerText / nodeValue.

Zusammenfassung

1. innerHTML analysiert Inhalte als HTML, daher dauert es länger.
2. nodeValue verwendet geraden Text, analysiert kein HTML und ist schneller.
3. textContent verwendet geraden Text, analysiert kein HTML und ist schneller.
4. innerText Berücksichtigt Stile. Zum Beispiel wird kein versteckter Text angezeigt.

innerTextexistierte laut caniuse erst in Firefox 45 in Firefox , wird aber jetzt in allen gängigen Browsern unterstützt.

.textContentAusgänge text/plainwährend .innerHTMLAusgänge text/html.

Kurzes Beispiel:

var example = document.getElementById('exampleId');

example.textContent = '<a href="https://google.com">google</a>';

Ausgabe: <a href="http://google.com"> Google </a>

example.innerHTML = '<a href="https://google.com">google</a>';

Ausgabe: google

Sie können dem ersten Beispiel text/plainentnehmen, dass die Ausgabe des Typs nicht vom Browser analysiert wird und der gesamte Inhalt angezeigt wird. Die Ausgabe des Typs text/htmlweist den Browser an, sie vor der Anzeige zu analysieren.

MDN innerHTML , MDN textContent , MDN nodeValue

Die beiden, die ich gut kenne und mit denen ich arbeite, sind innerHTML und textContent .

Ich verwende textContent, wenn ich nur den Text eines Absatzes oder einer Überschrift wie folgt ändern möchte:

var heading = document.getElementById('heading')
var paragraph = document.getElementById('paragraph')

setTimeout(function () {
  heading.textContent = 'My New Title!'
  paragraph.textContent = 'My second <em>six word</em> story.'
}, 2000)

em { font-style: italic; }

<h1 id="heading">My Title</h1>
<p id="paragraph">My six word story right here.</p>

Also, textcontent ändert einfach den Text, aber es funktioniert nicht Parsing HTML, wie wir aus den Tags sichtbar im Klartext im Ergebnis dort berichten.

Wenn wir HTML analysieren möchten, verwenden wir innerHTML wie folgt :

var heading = document.getElementById('heading')
var paragraph = document.getElementById('paragraph')

setTimeout(function () {
  heading.innerHTML = 'My <em>New</em> Title!'
  paragraph.innerHTML = 'My second <em>six word</em> story.'
}, 2000)

em { font-style: italic; }

<h1 id="heading">My Title</h1>
<p id="paragraph">My six word story right here.</p>

In diesem zweiten Beispiel wird die Zeichenfolge, die ich der innerHTML- Eigenschaft des DOM-Elements zuweist, als HTML analysiert .

Das ist großartig und eine große Sicherheitslücke :)

(Suchen Sie nach XSS, wenn Sie mehr über die Sicherheit dafür erfahren möchten.)

innerText ist ungefähr das, was Sie erhalten würden, wenn Sie den Text auswählen und kopieren würden. Nicht gerenderte Elemente sind in innerText nicht vorhanden.

textContent ist eine Verkettung der Werte aller TextNodes im Unterbaum. Ob gerendert oder nicht.

Hier ist ein großartiger Beitrag, in dem die Unterschiede detailliert beschrieben werden

innerHTML sollte nicht in einen Vergleich mit innerText oder textContent einbezogen werden, da es völlig anders ist und Sie wirklich wissen sollten, warum :-) Suchen Sie es separat

[Hinweis: In diesem Beitrag geht es mehr darum, bestimmte Daten zu teilen, die jemandem helfen könnten, als den Leuten zu sagen, was sie tun sollen.]

Falls sich jemand fragt, was heute am schnellsten ist: https://jsperf.com/set-innertext-vs-innerhtml-vs-textcontent & https://jsperf.com/get-innertext-vs-innerhtml-vs-textcontent ( Beim zweiten Test handelt es sich bei dem Inhalt des Bereichs um einfachen Text. Die Ergebnisse können sich je nach Inhalt ändern.

Es scheint, dass dies .innerHtmlder große Gewinner in Bezug auf reine Geschwindigkeit ist!

(HINWEIS: Ich spreche hier nur von Geschwindigkeit. Vielleicht möchten Sie nach anderen Kriterien suchen, bevor Sie das zu verwendende auswählen!)

Element.innerHTML-Eigenschaft setoder getHTML-Code des Elements.

Bsp.: Wir haben ein <h1>Etikett und einen starken Stil:

<h1 id="myHeader" style="color: green"><strong>My Header</strong> Normal Text</h1> Zum getInhalt des Elements hat id „myHeader“ gleich, werden wir das gleiche tun:

var element = document.getElementById("myHeader");
element.innerHTML

Ergebnis zurückgeben:

<strong>My Header</strong> Normal Text`

Um neuen Inhalt (Wert) für dieses Element zu "setzen", befindet sich der Code hier:

Element.innerHTML = "My Header My Text";

Diese Eigenschaft funktioniert also nicht nur mit einfachem Text, sondern zielt auch darauf ab, HTML-Code zu übergeben oder zu kopieren.

=> Wir sollten es nicht benutzen.

Viele Programmierer (einschließlich ich) verwenden dieses Attribut jedoch, um Text in eine Webseite einzufügen, und diese Methode birgt ein potenzielles Risiko:

1. Falsche Operation: Durch das Einfügen jedes Textes wird nur manchmal der gesamte andere HTML-Code des eingefügten Elements gelöscht.
2. Aus Sicherheitsgründen: Natürlich sind die beiden obigen Beispiele völlig harmlos, auch wenn die Verwendung des Tags immer noch kein Problem darstellt, da der HTML5-Standard die Ausführung der Befehlszeile innerhalb des Tags verhindert hat. beim Einfügen in die Webseite über das innerHTML-Attribut. Siehe diese Regel hier .

Aus diesem Grund wird die Verwendung innerHTMLbeim Einfügen von einfachem Text nicht empfohlen, stattdessen verwendet textContent. Die textContentEigenschaft wird nicht verstehen, dass der Code, den Sie übergeben, eine HTML-Syntax ist, sondern nur ein 100% iger Text, nicht mehr und nicht weniger.

Das Ergebnis wird zurückgegeben, wenn textContentim obigen Beispiel Folgendes verwendet wird:

My Header My Text