JavaScript: Arbeiten mit dem Document Object Model (DOM)

Name: JavaScript: Arbeiten mit dem Document Object Model (DOM)
Author: Joseph Barrett

Wie nutzen Sie das Document Object Model.

Preview the first lesson free — get full access to all 6 lessons.

Kurs: On-Demand

In dieser Lektion Wir werden uns mit dem Erstellen und Einfügen befassen neue Elemente in das Dokumentobjektmodell. Mal sehen, was wir bisher haben. Habe hier dein Auswahlfeld für die Gartenvielfalt, und ich habe eine Größe von fünf angegeben damit es als Listenfeld herauskommt, und wir haben einige vorhandene Optionselemente. Nehmen wir zum Beispiel an, dies ist vielleicht eine Reiseseite. Die Leute wollen eine Stadt auswählen, die sie besuchen möchten. Wir geben ihnen einige Standardoptionen. Wir möchten ihnen auch erlauben, eine neue Stadt zur Liste hinzuzufügen und sie werden das können indem Sie hier unten den Namen der Stadt eingeben. Das funktioniert jetzt noch nicht. Wir werden den Code hinzufügen, damit es das tut. Daher habe ich hier einen Ereignishandler für die Schaltfläche "Senden" und ich habe ausgewählt, dass diese Box darstellt dass wir schon hier raus sind. Also werde ich hier zwei Schritte durchlaufen. Als erstes werde ich mein neues Element erstellen und das zweite ist, dass ich es einfügen werde in das vorhandene Element an einem bestimmten Ort. Dies ist nur eine kleine Hilfsmethode, die ich erstellt habe das erlaubt mir, eine Stadt mit Leerzeichen im Namen zu nehmen und verwandle das dort in einen bestimmten Wert. Aber der Kern davon ist Beachten Sie, dass ich document.createElement mache und ich erstelle ein Optionselement. Wenn Sie Attribute für dieses Element angeben möchten, Sie können diese einfach mit ihren Werten versehen. Der Wert wird also diese Zeichenfolge in Kleinbuchstaben sein das erstelle ich hier und der Text wird der tatsächliche Wert aus der Stadtbox sein das haben wir dort gemacht. Also haben wir das geschaffen. Wie bringen wir es dahin, wo wir es haben wollen? Und wir haben verschiedene Möglichkeiten dass wir hier hingehen können. Das erste ist voranstellen. Also nehme ich dieses ausgewählte Element und dies fügt es einfach vor dem ersten untergeordneten Element ein. Also, wenn wir wieder hierher kommen und einen Blick darauf werfen, Es gibt Ihre Sammlung von untergeordneten Elementen für das Auswahllistenfeld. Also nehme ich das. Ich werde das am Anfang hinzufügen. Geben Sie also Tokio ein und ich drücke auf "Senden". und dort macht es es das erste dort. Jetzt könnten wir das auch etwas anders machen. Wir haben auch insertBefore. InsertBefore nimmt das Element, das wir einfügen werden, das Element, das wir einfügen werden, als erster Parameter und sagt, wohin es gehen soll. In diesem Fall sind also untergeordnete Knoten von Null, und speichern wir das und wiederholen die Seite erneut. Und das sollte es gleich wieder am Anfang machen. Wir sind sicherlich nicht auf das allererste Element beschränkt. Ich könnte sagen, das zu tun und am Ende ist es hier unten. Beachten Sie nun, dass dies nicht das vierte oder sogar fünfte Element ist. aber was muss man über diese elemente verstehen ist, dass die Optionen nicht die einzigen Knoten dort sind. Leerzeichen werden beispielsweise als Textknoten eingegeben. Man muss also sehr genau hinschauen wenn Sie die Elemente in dieser Sammlung crawlen. Wenn Sie es am Ende einfügen möchten, das können wir auch. Versuchen wir das als eine andere Möglichkeit, dies zu tun. Na, bitte. Append legt es nur zum allerletzten Mal ab. Wenn wir es also noch einmal versuchen, los geht's, das ist der letzte. In dieser Lektion haben wir verschiedene Methoden gelernt um sicherzustellen, dass unser neues Element angezeigt wird an einer bestimmten Stelle im vorhandenen Element im DOM. Danke fürs zuschauen. In unserer nächsten Lektion werden wir mehr darüber sprechen durch die Hierarchie navigieren des Dokumentobjektmodells.

Mittelstufe Anbieter : Joseph Barrett 6 Lektionen · 29m auf Arabisch, Deutsch, Englisch, Spanisch, Französisch, Portugiesisch, Chinese

Kursbeschreibung

Das Document Object Model (DOM) ist eine grundlegende Funktion von JavaScript. In diesem Kurs lernen Sie, wie Sie Elemente erstellen und in das DOM einfügen, wie Sie im DOM navigieren und wie Sie Elemente auf der Webseite verschieben können. Sie machen eine Übung, wie Sie das Aussehen Ihrer Seite verändern können und lernen, wie Sie HTML-Attribute ändern können. Schließlich erhalten Sie Tipps zum Ändern der Cascading Style Sheets (CSS), die beschreiben, wie Ihre Seite optisch auf dem Bildschirm erscheint.

Was Sie lernen werden

Erstellen und fügen Sie neue Elemente in das Document Object Model (DOM) mit JavaScript ein
Navigieren Sie im DOM, um Seitenelemente zu lokalisieren und mit ihnen zu arbeiten
Verschieben Sie Elemente auf einer Webseite
Ändern Sie das Aussehen Ihrer Seite und manipulieren Sie HTML-Attribute
Wenden Sie Tipps und Tricks für das Arbeiten mit Cascading Style Sheets (CSS) in JavaScript an

Wichtige Erkenntnisse

Das Document Object Model (DOM) ist eine grundlegende Funktion von JavaScript.
JavaScript kann verwendet werden, um Elemente im DOM zu erstellen und einzufügen sowie ihn zu navigieren.
Elemente können auf der Webseite verschoben und ihre HTML-Attribute mit JavaScript geändert werden.
Cascading Style Sheets (CSS) beschreiben, wie eine Seite visuell auf dem Bildschirm angezeigt wird, und der Kurs behandelt Tipps zur Änderung davon.

Häufig gestellte Fragen

Was behandelt dieser Kurs?

Er behandelt das Erstellen und Einfügen von Elementen in das DOM, die Navigation des DOM, das Verschieben von Elementen auf der Webseite, das Ändern des Seitenaussehens, das Ändern von HTML-Attributen und Tipps zur Änderung von Cascading Style Sheets (CSS).

Welche Fähigkeiten werde ich aus diesem Kurs gewinnen?

Sie werden Fähigkeiten in Document Object Model, DOM Scripting, HTML Document Object Models, HTML Scripting, JavaScript (Programmiersprache) und Object-Oriented JavaScript aufbauen.

Enthält der Kurs praktische Übungen?

Ja, Sie werden eine Übung zum Ändern des Aussehens Ihrer Seite machen.

Welche Lektionen sind enthalten?

Die Lektionen sind Erstellen und Einfügen neuer Elemente, Navigieren des DOM, Verschieben von Elementen auf der Seite, Ändern des Seitenaussehens, Attribute-Manipulation und CSS JavaScript-Tricks.