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

Question

Ich verwende plain js, um den inneren Text eines Label-Elements 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 irgendetwas ä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 durch die jQuery Quelle sah, und es verwendet nodeValue genau einmal aber innerHTML- und textcontent mehrmals. Dann habe ich diesen Jsperf-Test gefunden, der darauf hinweist, dass der FirstChild.NodeValue wesentlich schneller ist. Zumindest interpretiere ich das so.

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

Answer 1

Differences between textContent/innerText/innerHTML on MDN.

And a Stackoverflow answer about innerText/nodeValue.

Zusammenfassung

1. nodeValue ist ein wenig verwirrend zu bedienen, aber schneller als innerHTML-.
2. innerHTML Inhalte als HTML analysiert und dauert länger.
3. textContent verwendet geraden Text, analysiert HTML nicht und ist schneller.
4. innerText Berücksichtigt Stile. Es wird zum Beispiel kein versteckter Text angezeigt.

innerText existierte nicht in firefox bis 45 FireFox nach caniuse ist aber jetzt in allen gängigen Browsern unterstützt.

Answer 2

.textContent Ausgänge text/plain während .innerHTML Ausgänge text/html.

Schnell Beispiel:

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

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

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

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

Ausgabe: google

Sie können aus dem ersten Beispiel sehen, dass die Ausgabe des Typs text/plain nicht vom Browser geparst wird und die Anzeige des vollständigen Inhalts bewirkt. Die Ausgabe des Typs text/html weist den Browser an, ihn zu analysieren, bevor er angezeigt wird.

MDN innerHTML, MDN textContent, MDN nodeValue

Answer 3

Die beiden kenne ich gut und arbeiten mit sind innerHTML- und textcontent.

Ich benutze textcontent wenn ich will nur den Text eines Absatzes ändern oder wie Überschrift so:

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>

So textcontent ändert einfach den Text, aber es HTML wird nicht analysiert, wie wir an den dort sichtbaren Tags im Klartext erkennen können.

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

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>

So, das zweite Beispiel den String parst I innerHTML- auf das DOM-Elements zuweisen Eigenschaft als HTML.

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

(XSS nachschlagen, wenn Sie für diese über Sicherheit wissen wollen)

Answer 4

innertext ist ungefähr das, was Sie erhalten würden, wenn Sie die ausgewählte Text und kopierte es. Elemente, die nicht gerendert werden, sind nicht in innerText vorhanden.

textcontent ist eine Verkettung von den Werten von allen TextNodes im Teilbaum. Ob gerendert oder nicht. Hier

ist ein great post welche die Unterschiede

innerHTML- sollte nicht mit innertext oder textcontent in einem Vergleich einbezogen werden, da sie völlig diffreent ist, und Sie sollten wirklich wissen, warum :-) es separat

nachschlagen