Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lernen Untersuchung von DOM-Eigenschaften in JavaScript | DOM-Manipulation für Interaktive Webentwicklung
Fortgeschrittene JavaScript-Beherrschung

bookUntersuchung von DOM-Eigenschaften in JavaScript

JavaScript stellt verschiedene Eigenschaften zur Verfügung, um auf Inhalte zuzugreifen und diese zu manipulieren. Das Verständnis dieser Eigenschaften ermöglicht es, den Inhalt von Webseiten dynamisch basierend auf Benutzerinteraktionen oder anderen Bedingungen zu aktualisieren.

InnerHTML

Die Eigenschaft innerHTML ermöglicht das Auslesen oder Setzen des HTML-Inhalts eines Elements, einschließlich Tags und Text. Sie gehört zu den am häufigsten verwendeten Eigenschaften für die dynamische Aktualisierung von Seiteninhalten.

index.html

index.html

index.js

index.js

copy

Die Eigenschaft innerHTML ruft den gesamten Inhalt einschließlich HTML-Tags ab und ermöglicht das Einfügen oder Aktualisieren von Inhalten mit HTML-Tags.

TextContent

Die Eigenschaft textContent liest oder setzt den Textinhalt eines Elements und entfernt dabei alle HTML-Tags. Optimal geeignet, wenn ausschließlich mit reinem Text gearbeitet werden soll, ohne die HTML-Struktur zu berücksichtigen.

index.html

index.html

index.js

index.js

copy

textContent ruft nur den Textinhalt ab, ignoriert HTML-Tags und setzt reinen Text, wobei alle Tags automatisch maskiert werden.

Wert

Die Eigenschaft value wird bei Formularelementen wie <input>, <textarea> und <select> verwendet und ermöglicht das Auslesen oder Setzen des vom Benutzer eingegebenen Werts.

index.html

index.html

index.js

index.js

copy

Der value-Eigenschaft ruft den aktuellen Wert von Formularelementen ab und setzt einen neuen Wert für Input-, Textarea- oder Select-Elemente.

Unterschiede zwischen InnerHTML und TextContent

Praxisbeispiel: Aktualisierung eines Benutzerprofils

Stellen Sie sich eine Benutzerprofilseite vor, auf der Anfangsdaten angezeigt werden und der Benutzer seine Profildaten über ein Formular aktualisieren kann. Wenn der Benutzer das Formular absendet, wird der Seiteninhalt dynamisch aktualisiert.

index.html

index.html

index.css

index.css

index.js

index.js

copy

Anfangs zeigt das Profil einen vordefinierten Benutzernamen und eine Biografie an, die über Eingabefelder geändert werden können. Wenn die Schaltfläche "Änderungen speichern" angeklickt wird, aktualisiert JavaScript das angezeigte Profil: textContent aktualisiert den Benutzernamen als reinen Text, während innerHTML die Biografie aktualisiert, um grundlegende HTML-Formatierungen zu ermöglichen und so alle vom Benutzer vorgenommenen Änderungen widerzuspiegeln.

1. Was macht die Eigenschaft innerHTML?

2. Wann verwendet man textContent anstelle von innerHTML?

3. Welche Ausgabe erzeugt der folgende Code?

4. Welche Eigenschaft wird verwendet, um den Wert eines <input>-Elements zu erhalten oder zu setzen?

question mark

Was macht die Eigenschaft innerHTML?

Select the correct answer

question mark

Wann verwendet man textContent anstelle von innerHTML?

Select the correct answer

question mark

Welche Ausgabe erzeugt der folgende Code?

Select the correct answer

question mark

Welche Eigenschaft wird verwendet, um den Wert eines <input>-Elements zu erhalten oder zu setzen?

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 6

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

Suggested prompts:

Can you explain when to use innerHTML vs textContent in real projects?

What are some security best practices when using innerHTML?

Can you provide more examples of using the value property with form elements?

Awesome!

Completion rate improved to 2.22

bookUntersuchung von DOM-Eigenschaften in JavaScript

Swipe um das Menü anzuzeigen

JavaScript stellt verschiedene Eigenschaften zur Verfügung, um auf Inhalte zuzugreifen und diese zu manipulieren. Das Verständnis dieser Eigenschaften ermöglicht es, den Inhalt von Webseiten dynamisch basierend auf Benutzerinteraktionen oder anderen Bedingungen zu aktualisieren.

InnerHTML

Die Eigenschaft innerHTML ermöglicht das Auslesen oder Setzen des HTML-Inhalts eines Elements, einschließlich Tags und Text. Sie gehört zu den am häufigsten verwendeten Eigenschaften für die dynamische Aktualisierung von Seiteninhalten.

index.html

index.html

index.js

index.js

copy

Die Eigenschaft innerHTML ruft den gesamten Inhalt einschließlich HTML-Tags ab und ermöglicht das Einfügen oder Aktualisieren von Inhalten mit HTML-Tags.

TextContent

Die Eigenschaft textContent liest oder setzt den Textinhalt eines Elements und entfernt dabei alle HTML-Tags. Optimal geeignet, wenn ausschließlich mit reinem Text gearbeitet werden soll, ohne die HTML-Struktur zu berücksichtigen.

index.html

index.html

index.js

index.js

copy

textContent ruft nur den Textinhalt ab, ignoriert HTML-Tags und setzt reinen Text, wobei alle Tags automatisch maskiert werden.

Wert

Die Eigenschaft value wird bei Formularelementen wie <input>, <textarea> und <select> verwendet und ermöglicht das Auslesen oder Setzen des vom Benutzer eingegebenen Werts.

index.html

index.html

index.js

index.js

copy

Der value-Eigenschaft ruft den aktuellen Wert von Formularelementen ab und setzt einen neuen Wert für Input-, Textarea- oder Select-Elemente.

Unterschiede zwischen InnerHTML und TextContent

Praxisbeispiel: Aktualisierung eines Benutzerprofils

Stellen Sie sich eine Benutzerprofilseite vor, auf der Anfangsdaten angezeigt werden und der Benutzer seine Profildaten über ein Formular aktualisieren kann. Wenn der Benutzer das Formular absendet, wird der Seiteninhalt dynamisch aktualisiert.

index.html

index.html

index.css

index.css

index.js

index.js

copy

Anfangs zeigt das Profil einen vordefinierten Benutzernamen und eine Biografie an, die über Eingabefelder geändert werden können. Wenn die Schaltfläche "Änderungen speichern" angeklickt wird, aktualisiert JavaScript das angezeigte Profil: textContent aktualisiert den Benutzernamen als reinen Text, während innerHTML die Biografie aktualisiert, um grundlegende HTML-Formatierungen zu ermöglichen und so alle vom Benutzer vorgenommenen Änderungen widerzuspiegeln.

1. Was macht die Eigenschaft innerHTML?

2. Wann verwendet man textContent anstelle von innerHTML?

3. Welche Ausgabe erzeugt der folgende Code?

4. Welche Eigenschaft wird verwendet, um den Wert eines <input>-Elements zu erhalten oder zu setzen?

question mark

Was macht die Eigenschaft innerHTML?

Select the correct answer

question mark

Wann verwendet man textContent anstelle von innerHTML?

Select the correct answer

question mark

Welche Ausgabe erzeugt der folgende Code?

Select the correct answer

question mark

Welche Eigenschaft wird verwendet, um den Wert eines <input>-Elements zu erhalten oder zu setzen?

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 6
some-alt