Wie greife ich auf die textContent-Eigenschaft des HTML-DOM-Elements in JavaScript zu und bearbeite sie?

Wie Greife Ich Auf Die Textcontent Eigenschaft Des Html Dom Elements In Javascript Zu Und Bearbeite Sie



Beim Erstellen von Websites kann es für Entwickler erforderlich sein, den Textinhalt der Website von Zeit zu Zeit zu aktualisieren. Um diese Funktionalität zu erreichen, bietet JavaScript eine breite Palette vordefinierter Methoden und Eigenschaften. Unter diesen Eigenschaften gibt es eine „textContent“-Eigenschaft, die auf den Textinhalt des Zielelements zugreift und diesen manipuliert.

In dieser Anleitung wird veranschaulicht, wie Sie in JavaScript auf die Eigenschaft „textContent“ des HTML-DOM-Elements zugreifen und diese bearbeiten.

Schauen Sie sich zunächst die Grundlagen der HTML-DOM-Eigenschaft „textContent“ an.







Was ist die HTML-DOM-Eigenschaft „textContent“ in JavaScript?

Der ' Textinhalt „ ist die integrierte Eigenschaft, die den Text eines angegebenen Elements oder Knotens einschließlich aller seiner Nachkommen festlegt, abruft und ändert. Die Nachkommen sind untergeordnete Elemente wie , , und viele mehr, die zu Formatierungszwecken verwendet werden. Beim Festlegen des Textes mithilfe der Eigenschaft „textContent“ werden die Nachkommen des Zielelements vollständig durch den neuen Text ersetzt.



Syntax (Textinhalt festlegen)



Die grundlegende Syntax zum Festlegen des Textes eines Elements/Knotens mithilfe der „ Textinhalt „Eigenschaft ist unten geschrieben:





Element. Textinhalt = Text | Knoten. Textinhalt = Text

Die obige Syntax nimmt das gewünschte „ Text ” als Wert, den der Benutzer für ein Element oder einen Knoten festlegen möchte.

Syntax (Textinhalt abrufen)



Die verallgemeinerte Syntax zur Rückgabe des Textes eines Elements oder Knotens über „ Textinhalt „Eigenschaft wird hier angegeben:

Element. Textinhalt | Knoten. Textinhalt

Rückgabewert: Der ' Textinhalt Die Eigenschaft „gibt“ die Eigenschaft „ Text ” eines Elements oder Knotens mit Abstand, aber ohne seine inneren HTML-Tags.

Nutzen Sie nun die oben definierten Syntaxen praktisch, um auf die Eigenschaft „textContent“ zuzugreifen und sie zu bearbeiten.

Wie greife ich auf die Eigenschaft „textContent“ des HTML-DOM-Elements in JavaScript zu und manipuliere sie?

Ähnlich wie die Eigenschaften „innerHTML“ und „innerText“ ist „ Textinhalt „-Eigenschaft ermöglicht es den Benutzern auch, den Text des gewünschten Elements einfach festzulegen, darauf zuzugreifen und ihn zu ändern. In diesem Abschnitt werden alle diese Vorgänge an einem Element anhand der unten aufgeführten Beispiele ausgeführt.

Beispiel 1: Anwenden der Eigenschaft „textContent“ für den Zugriff auf den Element-/Knotentext

In diesem Beispiel wird die Eigenschaft „textContent“ angewendet, um den Text eines bestimmten Elements oder Knotens einschließlich aller seiner untergeordneten Elemente zurückzugeben.

HTML Quelltext

< div Ausweis = „myDiv“ onmouseover = „getText()“ Stil = „Rand: 3 Pixel durchgehend schwarz; Breite: 400 Pixel; Abstand: 5 Pixel 5 Pixel; Rand: automatisch;“ >

< h1 > Erste Überschrift < / h1 >

< h2 > Zweite Überschrift < / h2 >

< h3 > Dritte Überschrift < / h3 >

< h4 > Vierte Überschrift < / h4 >

< h5 > Fünfte Überschrift < / h5 >

< h6 > Sechste Überschrift < / h6 >

< / div >

In den obigen Zeilen des HTML-Codes:

  • Der '
    „Tag mit der ID „myDiv“ erstellt ein div-Element, das mit den folgenden Eigenschaften gestaltet ist: Rahmen, Breite, Abstand (oben und unten, links und rechts) und Rand. Es fügt auch das „ onmouseover ”-Ereignis, das das „ getText() ”-Funktion, wenn der Benutzer mit der Maus darüber fährt.
  • Innerhalb des div fügen alle angegebenen Überschriften-Tags (h1, h2, h3, h4, h5 und h6) die Überschriftenelemente entsprechend ihren angegebenen Ebenen ein.

JavaScript-Code

< Skript >

Funktion getText ( ) {

war elem = dokumentieren. getElementById ( „myDiv“ ) ;

Alarm ( Element. Textinhalt ) ;

}

Skript >

Im oben geschriebenen JavaScript-Codeblock:

  • Definieren Sie eine Funktion mit dem Namen „ getText() “.
  • Innerhalb dieser Funktion wendet die Variable „elem“ das „ getElementById() ”-Methode, um über seine ID auf das div-Element zuzugreifen.
  • Der ' Alarm() „-Methode erstellt eine Warnbox, die die „ Textinhalt ”-Eigenschaft, um den Text des übergeordneten Div zusammen mit allen seinen abhängigen Elementen zurückzugeben.

Ausgabe

Die folgende Ausgabe öffnet ein Warnfeld mit dem Textinhalt des div-Elements:

Beispiel 2: Anwenden der Eigenschaft „textContent“, um den Textinhalt eines Elements einschließlich seiner Nachkommen zu ersetzen

Dieses Beispiel zeigt, wie die Eigenschaft „textContent“ alle untergeordneten Elemente eines Elements ersetzt und gleichzeitig seinen Text ändert.

HTML Quelltext

< Center >

< h1-ID = 'mein Kopf' onclick = „modifyText()“ >< B > Das B > Ist < Spanne > Überschrift < Spanne > < ich > Element ich > h1 >

Center >

In den oben genannten Codezeilen:

  • Der '

    „Tag fügt ein Überschriftenelement der Ebene 1 mit angehängtem „ hinzu onclick ”-Ereignis, das das „ modifizierenText() ”-Funktion, wenn der Benutzer darauf klickt.

  • Das Überschriftenelement enthält außerdem das „ ',' ', Und ' ”-Tags als seine Nachkommen. Das „ “-Tag wird verwendet, um die eingeschlossene Zeichenfolge fett darzustellen, das „“-Tag ohne Stileigenschaft wird verwendet, um kein Styling auf die gegebene Zeichenfolge anzuwenden, und das „ “-Tag wird verwendet, um das anzuzeigen angegebene Zeichenfolge kursiv.

JavaScript-Code

< Skript >

wo h1 = dokumentieren. getElementById ( 'mein Kopf' ) ;
Konsole. Protokoll ( h1 ) ;
Funktion „modifyText“. ( ) {
h1. Textinhalt = „Willkommen bei Linuxhint!“ ;
Konsole. Protokoll ( h1 )
}

Skript >

Im obigen JavaScript-Code:

  • Die Variable „h1“ verwendet die Variable „ document.getElementById() ”-Methode, um über die zugewiesene ID auf das Überschriftenelement zuzugreifen.
  • Der ' console.log() Die Methode zeigt das aufgerufene Überschriftenelement auf der Konsole an, bevor der Inhalt geändert wird.
  • Die Funktion namens „ modifizierenText() ” verwendet das „ Textinhalt ”-Eigenschaft, um den Text des abgerufenen Überschriftenelements zu ändern.
  • Die letzte Methode „console.log()“ zeigt nach der Änderung wieder den Wert „h1“ an.

Ausgabe

Die Konsole zeigt deutlich, dass beim Klicken darauf alle untergeordneten Elemente des angegebenen Überschriftenelements durch den neu angegebenen Text ersetzt wurden:



Beispiel 3: Anwenden der Eigenschaft „textContent“, um den Text des untergeordneten Elements zu ändern

In diesem Beispiel wird die Eigenschaft „textContent“ verwendet, um den Text des untergeordneten Elements des jeweiligen Elements zu ändern.

HTML Quelltext

< div Ausweis = „myDiv“ Stil = „Rand: 3 Pixel durchgehend schwarz; Breite: 400 Pixel; Abstand: 5 Pixel 5 Pixel; Rand: automatisch;“ >

< Center >

< Taste Ausweis = „btn“ onmouseover = „changeText()“ > Alter Knopf < / Taste >

< / Center >

< / div >

In diesem Szenario:

  • Das „div“-Element verfügt über ein „button“-Element, das mit Hilfe des „ ' Etikett.
  • Das Schaltflächenelement enthält außerdem eine zugewiesene ID und ein „ onmouseover ” Veranstaltung, die die „ changeText() ”-Funktion, wenn die Maus darüber fährt.

JavaScript-Code

< Skript >

war parentElement = dokumentieren. getElementById ( „myDiv“ ) ;
var-Ziel = dokumentieren. getElementById ( „btn“ ) ;
war find_me = parentElement. enthält ( Ziel ) ;
Wenn ( parentElement. enthält ( Ziel ) == WAHR ) {
Konsole. Protokoll ( finde mich ) ;
Funktion changeText ( ) {
Ziel. Textinhalt = „Neuer Button“ ;
}
} anders {
Konsole. Protokoll ( 'Ist nicht vorhanden' )
}

Skript >

Im obigen Codeausschnitt:

  • Die Variable „parentElement“ wendet das „ getElementById() ”-Methode für den Zugriff auf das übergeordnete div-Element. Die Variable „target“ verwendet auch die Methode „getElementById()“, um das hinzugefügte Schaltflächenelement anhand seiner ID abzurufen.
  • Die Variable „find_me“ verwendet die Variable „ enthält() ”-Methode, um zu überprüfen, ob das Zielschaltflächenelement das untergeordnete Element des Div ist oder nicht. Diese Methode gibt „ WAHR ” für „ja“, sonst „falsch“.
  • Der ' ansonsten Die Anweisung definiert einen Codeblock.
  • Wenn das Zielelement das untergeordnete Element des übergeordneten Elements ist, dann wird „ changeText() Die Funktion ändert ihren Text über die Funktion „ Textinhalt ' Eigentum. Andernfalls wird der „else“-Codeblock ausgeführt, um die angegebene Nachricht mithilfe des „ console.log() ' Methode.

Ausgabe

Die Konsole zeigt ein „ WAHR „ boolescher Wert, der überprüft, ob das Schaltflächenelement das untergeordnete Element des angegebenen Div ist, und dann ändert sich sein Text, wenn Sie mit der Maus darüber fahren:

Unterschied zwischen textContent-, innerText- und innerHTML-Eigenschaften?

Generell gilt: „ Textinhalt ',' innerText ', Und ' innerHTML „Eigenschaften beschäftigen sich mit dem Text eines Elements oder Knotens, indem sie ihn festlegen und abrufen. Diese Eigenschaften unterscheiden sich jedoch aufgrund einiger Faktoren voneinander. In diesem Abschnitt werden die Hauptunterschiede zwischen allen hervorgehoben:

Bedingungen 'Textinhalt' „innerText“ “innerHTML”
Rückgabetyp Es gibt den Text eines Elements zurück, einschließlich aller seiner untergeordneten Elemente (Formatierungs-Tags), des versteckten CSS-Texts und des Leerzeichens. Die HTML-Tags eines Elements werden nicht zurückgegeben. Es gibt den Textinhalt des Ziel-HTML-Elements mit allen seinen untergeordneten Elementen (Formatierungs-Tags) zurück. Es gibt kein Leerzeichen, keinen versteckten CSS-Text und keine HTML-Tags außer