Was sind die Hauptunterschiede zwischen „innerText', „innerHTML', „textContent' und „value' in JavaScript?

Erkunden der Unterschiede zwischen innerText, innerHTML und value

Unterschiede verstehen

In JavaScript sind die Attribute innerText, innerHTML und value bieten verschiedene Möglichkeiten zur Interaktion mit dem HTML-Inhalt einer Webseite. Jedes dieser Attribute hat seine eigene spezifische Funktionalität und Anwendungsfälle.

innerHTML: HTML-Darstellung

Die innerHTML-Eigenschaft spiegelt die HTML-Syntax wider, die die Nachkommen eines Elements beschreibt. Es stellt eine Darstellung des HTML-Inhalts innerhalb der öffnenden und schließenden Tags des Elements bereit.

innerText: Gerenderter Text

Die innerText-Eigenschaft erfasst den gerenderten Text innerhalb eines Elements. Es stellt den Inhalt so dar, wie er auf dem Bildschirm erscheint, und berücksichtigt dabei angewandte Stile und Leerraumregeln. Insbesondere gilt innerText:

• Ignoriert Skript-Tags und CSS-Stylesheets
• Trimmt Leerzeichen und fügt Zeilenumbrüche zwischen Elementen hinzu
  -Wendet Texttransformation und Leerraumregeln an

Textinhalt: Roh Text

textContent ruft den Textinhalt eines Knotens und seiner Nachkommen ab. Im Gegensatz zu innerText behält es Leerzeichen bei und ignoriert alle angewendeten Stile oder Anzeigeeigenschaften. Dies führt zu einer wörtlicheren Darstellung des Inhalts.

Wert: Elementspezifisches Attribut

Das Wertattribut gilt hauptsächlich für Formulareingaben wie Textfelder und Kontrollkästchen. Es stellt den aktuell im Steuerelement gespeicherten Wert dar. Insbesondere:

• Bei Eingabeelementen enthält der Wert die vom Benutzer eingegebene Zeichenfolge.
• Bei ausgewählten Elementen enthält der Wert den Wert der ausgewählten Option.

Beispielskript zum Vergleich

Das folgende JavaScript-Skript zeigt die Unterschiede zwischen diesen Attribute:

var properties = ['innerHTML', 'innerText', 'textContent', 'value'];

// Logs property as [propName]value[/propertyName]
function logProperty(obj, property) {
  var value = obj[property];
  console.log('[' + property + ']' + value + '[/' + property + ']');
}

// Main
log('=============== ' + properties.join(' ') + ' ===============');
for (var i = 0; i < properties.length; i++) {
  logProperty(document.getElementById('test'), properties[i]);
}

Bei Anwendung auf das HTML-Snippet unten gibt das Skript Folgendes in der Konsole aus:

<div>

Ausgabe:

[innerHTML][
  Warning: This element contains <code>code</code> and <strong>strong language</strong>.
][/innerHTML]
[innerText]Warning: This element contains code and strong language.[/innerText]
[textContent]
  Warning: This element contains <code>code</code> and <strong>strong language</strong>.
[/textContent]
[value]null[/value]

Diese Ausgabe zeigt, wie innerText den gerenderten Text zurückgibt, innerHTML die vollständige HTML-Darstellung, textContent den Rohtext einschließlich Leerzeichen und value (da test ein div-Element ist) ist null.

Das obige ist der detaillierte Inhalt vonWas sind die Hauptunterschiede zwischen „innerText', „innerHTML', „textContent' und „value' in JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!