textContent vs innerText: Welches soll verwendet werden?

innerText und textContent sind zwei häufig verwendete Eigenschaften in JavaScript für den Zugriff auf den Textinhalt von Elementen . Obwohl beide Eigenschaften eine ähnliche Funktionalität aufweisen, gibt es wesentliche Unterschiede, die den jeweils geeigneten Anwendungsfall bestimmen.

innerText

innerText gibt den sichtbaren Text zurück, der in einem HTML-Element enthalten ist. Es schließt alle versteckten Elemente oder Elemente aus, deren Anzeigestil auf „none“ gesetzt ist.

Beispiel:

Hello 

innerText würde dafür „Hallo“ zurückgeben element.

textContent

textContent hingegen gibt den vollständigen Textinhalt zurück, unabhängig von Sichtbarkeit oder Anzeigestilen. Im obigen Beispiel würde textContent „Hello World“ zurückgeben.

Hauptunterschiede:

• Standardkonformität: innerText war ein Non -Standard-Eigenschaft, während textContent eine standardisierte Eigenschaft ist.
• Leistung: innerText erfordert Layoutinformationen um sichtbaren Text zu bestimmen, was ihn leistungsintensiver macht als textContent.
• Scope: innerText ist nur für HTMLElement-Objekte verfügbar, während textContent mit allen Node-Objekten verwendet werden kann.

Überlegungen zur Verwendung:

Für Fälle, in denen Sie nur auf den sichtbaren Text zugreifen möchten, innerText ist möglicherweise eine effizientere Wahl. Wenn Sie jedoch den gesamten Textinhalt abrufen müssen, ist textContent die bevorzugte Eigenschaft.

Im bereitgestellten Beispiel:

var logo$ = document.getElementsByClassName('logo')[0];
logo$.textContent = "Example";

Sie können textContent verwenden, um den Textinhalt des Logo-Elements zu aktualisieren. Es ersetzt jeden vorhandenen Text durch „Beispiel“.