Es geht in diesem Kurs darum, JavaScript innerhalb von HTML Seiten einzusetzen.
Es geht wirklich nur darum, HTML Seiten mit JavaScript anzureichern, um sie lesbarer und attraktiver zu machen oder um Funktionalität zu implementieren, die alleine mit HTML und CSS nicht machbar ist.
JavaScript bietet eine umfangreiche Schnittstelle zu HTML, wirklich umfangreich.
Da man mit einen kleinen Teil des insgesamt riesigen Funktionsumfangs der Schnittstelle schon Enormes bewirken kann, konzentrieren wir uns im Kurs in erster Linie auf diese wenigen, aber zentralen Sprachkonstrukte. Die 80 / 20 Regel - mal wieder.
Auf der einen Seite interessieren uns die Funktionen und Objekte der Schnittstelle, die man verwenden kann, um Struktur, Layout und Inhalt eines Dokumentes zu verändern.
Auf der anderen Seite geht es darum, wie JavaScript in einem HTML Kontext aufgerufen und ausgeführt wird. Im Zentrum steht dabei die Ereignisbehandlung.
Vorweg
Teilnehmer
Teilnehmer an diesem Kurs müssen die Grundelemente der Programmiersprache JavaScript schon kennen. Die Grundlagen gibt es in der Doku zu JavaScript Schnelldurchgang 1. Mehr ist nicht nötig.
Teilnehmer müssen außerdem Grundkenntnisse in HTML und CSS mitbringen. Wer die Doku zu HTML Schnelldurchgang und CSS Schnelldurchgang gelesen hat, sollte weitgehend auf der sicheren Seite sein.
Werkzeuge
Die erforderlichen Werkzeuge für diesen Kurs sind:
- Ein Texteditor
- Ein Browser
Editor
Als Texteditor kommt an sich alles in Frage, was gut und günstig zu bekommen ist. Unter Windows ist das z.B. notepad++. Der hauseigene notepad schwächelt doch etwas. Unter Linux sollte man sich zumindest kate installieren. (Geht übrigens auch unter Windows.) Die hauseigenen Editoren der Distributionen, wie gedit oder xed, kann man zwar benutzen, aber sie bieten wenig Unterstützung.
Wer schon bluefish eingesetzt hat, kann den gerne weiter benutzen. Das gleiche gilt für sonstige Editoren, für die man ein Faible hat.
Ich würde am Anfang nicht dazu raten, einen allzu komplizierten Editor oder eine IDE zu verwenden, es sei denn man hat damit eh schon Erfahrungen gesammelt. Man ist bei den Editoren, die gegenwärtig als Superstars gehandelt werden (VSCodium, Sublime-Text, CudaText etc.), viel zu sehr damit beschäftigt, erst einmal den Editor zu erkunden und kommt nicht zum eigentlichen Arbeiten.
Browser
Jeder moderne Browser ist in Ordnung.
Allerdings unterscheiden sich auch die modernen Browser in manchen Fällen in ihrer Implementierung von bestimmten JavaScript Features. Deshalb ist es nötig, bei einzelnen Befehlen die Kompatibilitätsliste im Auge zu behalten. Auf den MDM Seiten, auf die hier immer wieder verwiesen wird, gibt es bei den Referenzen jeweils unten auf der Seite eine Kompatibilitätsmatrix.
Eine weitere Quelle ist "Can I Use". Das ist eine Website, die sich ausschließlich mit der Kompatibilität einzelner Webfeatures beschäftigt.
Getestet wurden die Beispiele mit Chromium, Firefox und Web. Damit sind die drei JavaScript Engines abgedeckt, die im Moment im Handel sind.
JavaScript Schnittstellen
Die Schnittstellen zwischen JavaScript und seiner Umgebung
JavaScript ist eine interpretierte Sprache. JavaScript braucht, wie PHP oder Perl oder Python, eine Laufzeitumgebung, in der die Programme ausgeführt werden. Die Laufzeitumgebung für JavaScript wird von einem Browser bereitgestellt. D.h.: JavaScript Programme laufen im Browser laufen.
Zwischen den in einem Browser laufenden JavaScript Programmen und ihrer Umgebung gibt es Schnittstellen. Gäbe es sie nicht, wäre das ganze sinnlos.
Es gibt drei große Schnittstellen, über die man aus JavaScript heraus, die zugängliche Umgebung beeinflussen kann:
- Die Schnittstelle von JavaScript zum Browser direkt, über die man das Verhalten des Browsers beeinflussen kann.
- Die Schnittstelle von JavaScript zum Document Objekt Model, über die man das DOM manipulieren kann.
- Die Schnittstelle von JavaScript zum CSS Objekt Model, über die man das aktuell im Browser verwendete Style Sheet manipulieren kann.
Es gibt dagegen keine Schnittstelle zum Computer: Kein Zugriff auf das Betriebssystem, kein Zugriff auf den Hauptspeicher, kein Zugriff auf Dateien.
Diese nicht existierende Schnittstelle ist der Kern - das A und O - des JavaScript Sicherheitskonzeptes. JavaScript Programme können keinen Schindluder mit dem Rechner treiben, weil es schlicht keine Befehle gibt, die man dafür missbrauchen kann. Oder: Wo nichts ist, hat der Hacker seine Macht verloren.
In unserem Zusammenhang ist das DOM Interface das einzig wirkliche interessante. Das CSSOM ist nichts für Anfänger, man muss sehr viel Know How schon haben, um es überhaupt im Ansatz verstehen zu können. Das Browser Interface ist dagegen recht überschaubar, aber für normale Anwendungen nicht erforderlich. Browser Interface und CSSOM Interface werden hier erwähnt aber nur, um zu sagen, dass es bei der Erwähnung auch bleiben wird.
Die Browser Schnittstelle
JavaScript und der Browser
Die Browser Schnittstelle beinhaltet Möglichkeiten, aus JavaScript heraus das Verhalten des Browsers ans Stellen zu beeinflussen, die nichts mit der Ausführung einer einzelnen, konkreten HTML Datei zu tun haben. Gibt's das? Hmm. Ja.
Der Browser hat z.B. eine Menü, eine Adresszeile, eine Tab-Leiste, ein Layout etc. Diese Dinge sind vollkommen unabhängig davon, ob ich mich gerade in Wikipedia herumtreibe, irgendwo anders surfe oder eine Web-Anwendung ausführe.
Wir werden diese Schnittstelle in dieser Doku nur anreißen, um zu zeigen, dass es sei gibt. Die Manipulation des Browsers ist etwas für speziell Anwendungen und für den Anfang eher Ballast, als Erkenntnis.
Das "Window" Interface
Die Schnittstelle zum Browser wird weitgehend in dem Interface "Window" gebündelt.
Die am häufigsten beschriebene Funktion - zumindest in jeder Dokumentationen zu Einführung in JavaScript - ist das JavaScript Kommando alert(someText). Mit dem Aufruf wird ein kleines Fenster im Browser aufgemacht, in dem der übergebene Text angezeigt wird.
Für die Anzeige des berühmten Textes: "Hello world!" ist die Funktion auch durchaus geeignet. Für mehr aber auch nicht.
Das Gleiche gilt für ihr Gegenteil: let answer = prompt(). Damit wird eine Eingabe des Benutzers angefordert, auch in einem kleinen extra Fenster.
Diese beiden Methoden werden hier nicht weiter besprochen. Man sollte sie kennen, aber nicht benutzen. In normalen, einfachen HTML Seiten sind sie unhandlich und zerbrechen die Benutzerführung. In Seiten mit ausgefeilter Logik gibt es auch ausgefeiltere Methoden, um den Benutzer über irgend etwas zu informieren.
Ist man noch dabei, eine Webseite zu bauen, so ist es oft notwendig, sich Zwischenstände oder geplante Ausgaben anzusehen. Statt hier mit alert() oder prompt() zu arbeiten, ist einem besser damit gedient, sich mit der Implementierung der Entwicklerwerkzeuge im Browser vertraut zu machen und die Eigenschaft console des Windows Interfaces zu benutzen.
Man öffnet die Entwicklerwerkzeuge in allen mir bekannten Browsern mit der Funktionstaste F12. Dort gibt es immer einen Reiter Console. Hier erscheinen Meldungen, die man per JavaScript absetzen kann.
Einfache Ausgabe in den Entwicklerwerkzeugen. console.log("Hallo Tach!");
Die console bietet auch die Möglichkeit komplexere Dinge anzuzeigen und in die Innereien von Objekten hineinzusehen.
Beobachten von Variablen in den Entwicklerwerkzeugen.
const arr = [1, 2, undefined, 42];
console.log("arr:", arr, "Typ:", typeof(arr));
Diese Art von Meldungen lassen sich überall in JavaScript einbauen, ohne dass sie auf der Benutzeroberfläche - in der HTML Ansicht - zu sehen sind.
Nachlesen
Die CSSOM Schnittstelle
JavaScript und CSS
Parallel zum DOM, in dem die Struktur des HTML Dokumente abgebildet wird, baut ein Browser auch ein Objektmodell für CSS auf, in dem die existierenden CSS Regeln abgebildet sind.
Für die Modifikation dieser Regeln bietet das CSSOM einen ganzen Satz an API's an.
Wie schon angekündigt setzen wir uns damit hier nicht auseinander, es geht zu weit, ist zu kompliziert, ist Overkill etc.
Was am CSS Object Model auch für Normalverbraucher interessant ist, ist das Interface CSSStyleDeclaration. Dieses Interface kann auch über die Eigenschaft HTMLElement.style angesprochen werden und ist auch für Menschen benutzbar, die nicht zu dem Thema promoviert haben. Siehe Das Attribut "style".
Nachlesen
Die DOM Schnittstelle
JavaScript und das HTML Dokument
Wirklich interessant ist die Schnittstelle zum DOM.
Wie die anderen beiden Schnittstellen besteht die DOM Schnittstelle aus diversen einzelnen Interfaces, von denen hier nur die wichtigsten
- Node
- Element und HTMLElement
- Document
vorgestellt werden.
Alle Objekte, mit denen wir es zu tun haben, implementieren auch die EventTarget Schnittstelle. Um dieses Interface geht es beim Thema Ereignisbehandlung und wird dort vorgestellt.
Die Implementierung dieser Interfaces ist hierarchisch. Es gibt zwei Stränge:
- EventTarget ⇐ Node ⇐ Document
- EventTarget ⇐ Node ⇐ Element ⇐ HTMLElement
Auch wenn es auf den ersten Blick so aussieht, es handelt sich dabei nicht um eine Klassenhierarchie. Die Dinge hier sind keine Klassen, es sind Interfaces.
Beiden Strängen gemeinsam sind die Interfaces EventTarget und Node
Das EventTarget Interface definiert einen Satz an Funktionen und Attributen für die Ereignisbehandlung.
Das Node Interface baut auf dem EventTarget Interface auf. Ein Objekt, das das Node Interface implementiert, muss auch das EventTarget Interface implementieren.
Bei der täglichen Arbeit hat man mit den beiden allerdings wenig zu tun. Arbeiten tut man entweder mit Document oder mit Element bzw. HTMLElement.
Nur hinter Document verbirgt sich eine instanziierbare Klasse, die anderen sind reine Schnittstellen, die von Objekten implementiert werden, hinter denen sich HTML Elemente verbergen.
Das Document Interface kann man direkt über das vorinstallierte Objekt document ansprechen.
Das HTMLElement Interface hat man immer zur Verfügung, wenn man mit einem HTML Element arbeitet, dass man mit einem entsprechenden Hilfsmittel identifiziert hat. (Siehe unten.)
Document und HTMLElement sind die Interfaces, mit denen man am Ende arbeitet.
Der Unterschied zwischen den Interfaces gehört zu den Bereichen von JavaScript, die sich nur durch die Entwicklungsgeschichte erklären lassen. In der Doku von mdm wird versucht die Interfaces zu systematisieren und einigermaßen zu definieren. selfhtml versucht das nicht, benutzt aber die Begriffe. w3schools packt einfach die Beschreibung aller Attribute und Funktionen unter Element und Document. Obwohl das nicht ganz zu der Doku der offiziellen Stellen passt, die zwischen den verschiedenen Interfaces unterscheidet, ist das Vorgehen von w3schools unter praktischen Gesichtspunkten ein denkbarer Ansatz.
Nachlesen
Das "Node" Interface
Das Node Interface repräsentiert einen Knoten in der Baumstruktur des DOM. Darunter fallen nicht nur die offensichtlichen, wie Element oder Document, sondern auch die weniger sichtbaren Knoten, wie Attribute, Bilder und Texte.
Nachlesen
Das "Document" Interface
Die zentrale Anlaufstelle für den Zugriff auf das DOM ist das Document Interface. Über Document kann aus JavaScript heraus auf das gesamte HTML Dokument und alle darin enthaltenen Element zugegriffen werden.
Für diesen Zugriff existiert ein vordefiniertes Objekt mit Namen document. Dieses Objekt ist immer vorhanden und kann ohne Vorbereitung benutzt werden. Das document Objekt implementiert auch das Node Interface und das für des Empfangen von Ereignissen notwendige EventTarget Interface.
Auf der Ebene einer Klassenhierarchie liegt Document auf derselben Ebene wie Element.
Das Interface Document verwendet man bei Operationen, die auf das gesamte Dokument abzielen. In 80% aller Fälle handelt es sich dabei um Operationen, bei denen es darum geht, einzelne Elemente oder Listen von Elemente zu identifizieren, mit denen anschließend weiter gearbeitet werden soll.
Nachlesen
Das "Element" Interface
Das Element Interface beinhaltet Funktionen und Attribute, die allen Elementen zu eigen sind. 80% aller Operationen im DOM betreffen die Manipulation einzelner Elemente.
Wie Document implementiert ein Element Objekt auch das Node Interface.
Ein Element in einem HTML Dokument kann alles Mögliche sein: eine Überschrift, ein Paragraf, ein Abschnitt (div), ein Bild (img) ein neutrales inline Element (span), eben alles, was als Element markiert werden kann.
Nachlesen
Das "HTMLElement" Interface
HTMLElement ist Element nach gelagert und umfasst damit auch das Node Interface.
Das Interface bietet zusätzlich zu den Attributen und Funktionen des Element Interfaces ein paar wenige, zusätzliche Features, die nur für Elemente in einem HTML DOM interessant sind. (Im Gegensatz zu einem XML oder SVG DOM.)
Operiert man mit JavaScript in einem HTML Dokument, so sind alle Objekte, die auf HTML Elemente zeigen, vom Typ HTMLElement.
Nachlesen
Elemente selektieren
Die Manipulation des Dom bedeutet Manipulation einzelner Elementen. Man kann zwar ganze Listen von Elementen auf einen Schlag manipulieren, aber dazu muss man die Liste abarbeiten und die Operationen Element für Element durchführen.
Ganz wesentlich ist es daher, zu bestimmen, welche Elemente - oder welches Element - überhaupt bearbeitet werden sollen.
Ergebnistypen
Bei der Suche nach bestimmten Elementen können unterschiedliche Ergebnisse herauskommen. Prinzipiell kann eine Suche
- viele Treffer,
- genau einen Treffer,
- keinen Treffer
haben.
JavaScript hat Funktionen, die Trefferlisten liefern und Funktionen, die eine Ergebnisliste auf genau einen Treffer eindampfen.
Listen
Die meisten Funktionen zu Selektion von Elementen liefern eine Liste von Elementen, die den Suchkriterien entsprechen. Je nach Funktion wird eine Liste vom Typ NodeList oder vom Typ HTMLCollection geliefert. Diese beiden Listentypen unterscheiden sich vor allem darin, dass die NodeList statisch, die HTMLCollection jedoch "lebendig" ist.
Bei einer statischen Liste wird einmalig das Ergebnis ermittelt, das sich danach nicht mehr ändert, während bei einer "lebenden" Liste die Ergebnisse immer dem aktuellen Stand entsprechen. D.h. während man mit einer lebenden Liste arbeitet, werden Änderungen an den Elementen sofort reflektiert.
Ändert man die Klasse eines gefundenen Elementes, so verschwindet es aus der Trefferliste. Ändert man die Klasse eines beliebigen anderen Elementes in den gesuchten Klassennamen, so taucht dieses Element stillschweigend in der Trefferliste auf.
Normalerweise kann man das ignorieren. Es gibt aber Fälle, in denen dieses Verhalten bei der Programmierung berücksichtigt werden muss. (BSP bei mdn Änderungen der Klasse von Elementen in einer lebenden Liste.)
Nachlesen
Unabhängig vom Typ der Liste besteht der Inhalt jeder Liste aus Objekten, die das HTMLElement Interface implementieren.
Wenn es keine Treffer gibt, ist die Liste leer.
Einzelne Elemente
Daneben gibt es Funktionen, die die Ergebnismenge auf genau ein Element einschränken. Eine solche Funktion liefert ein Objekt zurück, das HTMLElement Interface implementiert.
Wenn die Suchkriterien mehrere Treffer ergeben würden, liefern die Funktionen das erste gefundene Element.
Wenn es keine Treffer, liefern die Funktionen den Wert null.
Zugriffsfunktionen
Auswahl von Elementen mit spezialisierten Zugriffsfunktionen
getElementByID
Die Funktion getElelementById() liefert genau ein Element mit der entsprechenden ID zurück.
Diese Funktion wird immer dann benutzt, wenn ein einzelnes Element selektieren werden soll, dessen ID bekannt ist.
Im Gegensatz zu nahezu allen anderen hier besprochenen Funktionen, ist getElementByID() nur im document Interface implementiert, und nicht im Interface für normale Elemente. D.h. man muss den Aufruf mit document dereferenzieren.
Syntax
let resultElement = document.getElementByID(id);
Parameter
Als Argument erwartete die Funktion die im HTML Dokument mit id="xxx"festgelegte ID eines Elementes.
Ergebnis
Das Ergebnis ist das HTMLElement mit der entsprechenden ID oder null, wenn es kein passendes Element gibt.
Per Definition ist in einem HTML Dokument der Wert des Attributs id eindeutig. Daher kann man recht sicher sein, mit der Abfrage auch das zu bekommen, was man erwartet.
Man sollte allerdings im Hinterkopf behalten, dass es keinen Mechanismus gibt, der die erwartete Eindeutigkeit erzwingt. Sind in einem Dokument mehrere Elemente mit derselben ID vorhanden - was nicht sein sollte, aber aus Versehen durchaus passieren kann - dann liefert die Funktion das erste Element mit der entsprechenden ID zurück.
Nachlesen
getElementsByClassName
Die Funktion getElementsByClassName liefert alle Elemente, die zu einer bestimmten Klasse gehören.
Die Funktion wird im Element und im Document Interface implementiert und liefert eine HTMLCollection
Syntax
let resultList = someElement.getElementsByClassName(className);
Wenn, wie hier, die Funktion mit einem Element dereferenziert wird, so werden nur Elemente gefunden, die unterhalb des betrachteten Elementes liegen. Wird mit document dereferenziert, so werden alle Elemente im gesamten Dokument gefunden.
Parameter
Als Argument erwartet die Funktion den Namen einer Klasse als String.
Es können auch mehrere Namen übergeben werden. Mehrere Namen werden - wie in HTML - durch Leerzeichen getrennt. Es werden in diesem Fall nur Elemente gefunden, die Mitglieder von allen Klassen sind, es ist also eine UND Verbindung.
Ergebnis
Die Funktion erzeugt eine aktuelle HTMLCollection für den angegebenen Suchfilter. Wird nichts gefunden, ist die Liste leer
Nachlesen
getElementsByTagName
Mit getElementsByTagName wird nach Elementen gesucht, die in der HTML Datei mit einer bestimmten Marke versehen sind. Damit kann man also alle Paragrafen finden. Oder Überschriften einer bestimmten Stufe. Oder Bilder. Oder, oder und so weiter.
Die Funktion ist im Element und im Document Interface implementiert.
Syntax
let resultList = someElement.getElementsByTagName(tagName);
Wenn, wie hier, die Funktion mit einem Element dereferenziert wird, so werden nur Elemente gefunden, die unterhalb des betrachteten Elementes liegen. Wird mit document dereferenziert, so werden alle Elemente um Dokument gefunden.
Parameter
Als Argument erwartet die Funktion den Namen der Marke eines HTML Elementes als String.
Ergebnis
Die Funktion erzeugt eine aktuelle HTMLCollection für den angegebenen Suchfilter. Wird nichts gefunden, ist die Liste leer.
Nachlesen
Zugriff per Selektor
Auswahl von Elementen mit einem CSS Selektor
Eine allgemeine - und gleichzeitig sehr mächtige - Methode zur Auswahl von Elementen basiert auf der Verwendung von Selektoren. "Selektor" ist hier nicht zufällig das selbe Wort, wie in CSS. Es sind Ausdrücke, die syntaktisch wie CSS Selekoren aufgebaut sind und auch das selbe bewirken.
JavaScript bietet zur Suche mit Selektoren zwei Funktionen, querySelector und querySelectorAll. Beide sind im Node Interface aufgehängt und stehen damit auch in Objekten, die das Element und Document Interface implementieren, zur Verfügung.
querySelectorAll
querySelectorAll durchsucht das HTML Dokument nach Elementen, auf die der Selektor zutrifft und baut daraus eine Nodelist auf. Die Liste ist statisch, d.h. ihre Ergebnismenge ändert sich nicht, wenn Elemente im DOM verändert werden.
Syntax
let resultList = someElement.querySelectorAll(cssSelector);
Wird die Funktion mit einem Element dereferenziert, enthält die Ergebnisliste nur Kinder des betreffenden Elementes. Wird mit document dereferenziert, werden alle Vorkommen im Dokument gefunden
Parameter
Als Argument bekommt die Funktion einen String, der mit der CSS Syntax für Selektoren konform ist.
Ergebnis
Das Ergebnis ist eine NodeList, also eine statische Liste, mit allen Elementen, auf die der Selektor zutrifft.
Genauso, wie CSS Selektoren immer ganze Elemente adressieren, enthält auch die gelieferte Nodelist nur Elemente (keine Attribut- oder Textknoten), so dass für jeden Eintrag in der Liste alle Funktionen des Element bzw. des HTMLElement Interfaces vorhanden sind.
Nachlesen
querySelector
Die Funktion querySelector() funktioniert wie die allgemeinere Funktion querySelectorAll, beschränkt die Ergebnismenge aber auf ein einzelnes Element.
Ihre Verwendung ist immer dann sinnvoll, wenn im Code syntaktisch genau ein Element erwartet wird.
Syntax
let resultElement = someElement.querySelector(cssSelector);
Parameter
Als Argument bekommt die Funktion einen String, der mit der CSS Syntax für Selektoren konform ist.
Ergebnis
Intern baut die Funktion eine Trefferliste auf und liefert dann stumpf das erste Ergebnis zurück. Das kann man natürlich auch per Hand bauen, aber wozu?
Nachlesen
Elemente modifizieren
Elementinhalte modifizieren
Modifizieren des sichtbaren Inhalts von Elementen
Sowohl das Auslesen als auch das Ändern des Inhalts von Elementen geschieht über Attribute eines HTMLElements. Dafür werden keine Funktionen eingesetzt.
Da das Ändern von Elementinhalten per Zuweisung an Attribute stattfindet, gibt es dabei keinerlei Prüfungen. Man muss daher höllisch aufpassen, was man da reinschreibt. Bei einzelnen und reinen Textknoten ist die Zuweisung von Inhalt ungefährlich. Schreibt man aber Text in ein Element mit strukturiertem Inhalt, überschreibt man auch die.
Wenn es irgend geht, benutzt für textContent für die Manipulation von Textinhalten und innerHTML für die Konstruktion von HTML. Die anderen Eigenschaften machen nur Ärger.
textContent
textContent enthält - wie der Name schon sagt - den Inhalt eines Elementes als Text. Formatierungen und alle anderen Struktureigenschaften sind nicht enthalten.
Lesen
Syntax lesen
let txt = someElement.textContent;
Mit diesem Statement wird der Textinhalt vom someElement der Variablen txt zugewiesen. Genauer gesagt wird der Inhalt des - versteckten - Textknotens von someElement und der Textknoten von evtl. vorhandenen Kindelementen gelesen und in txt abgelegt.
Der Text ist "pur", d.h. er enthält keine Steuerzeichen oder Zeilenumbrüche.
Schreiben
Syntax schreiben
someElement.textContent = "Hallo Tach";
Dieses Statement führt dazu, dass der Textinhalt von someElement hinterher "Hallo Tach" ist, egal, was vorher drin gestanden hat. Das bezieht sich nicht nur auf den "text content", sondern auch auf die Struktur.
Es werden vorhandenen Subelemente von someElement gleich mit platt gemacht!
Nachlesen
innerHTML
innerHTML ist das Werkzeug der Wahl, wenn man per JavaScript HTML generieren - oder auch transportieren - will.
innerHTML liefert beim Lesen valides HTML zurück und benutzt beim Schreiben die rendering engine des Browsers, was dazu führt, dass durch die Zuweisung die Seite neu aufgebaut wird.
Syntax lesen
let txt = someElement.innerHTML;
Nach diesem Statement enthält txt den Inhalt unterhalb von someElement inklusive der Struktur. D.h. in txt steht nicht nur der Text, sondern die ganzen HTML Markups aller Kindelemente vom someElement.
Ok, wenn in someElement außer Text nichts steht, dann steht auch in txt nur Text. In diesem Fall verhält sich innerHTML genau so, wie textContent.
Syntax schreiben (Text)
someElement.innerHTML = "Hallo Tach";
Diese Zuweisung versorgt someElement mit dem Text "Hallo Tach". Danach beinhaltet someElement außer diesem Text nichts anderes!
Syntax schreiben (Struktur)
someElement.innerHTML = "<p><strong>Hallo Tach</strong></p>";
Mit diesem Statement wird someElement mit einem Paragrafen versorgt, der den Text "Hallo Tach" enthält. Der Text wird stark hervorgehoben.
Der Paragraf wird zu einem Kindelement - dem einzigen - von someElement.
Nachlesen
outerHTML
Im Gegensatz zu innerHTML operiert outerHTML auf dem Element selber, nicht auf dessen Inhalt.
Syntax lesen
let txt = someElement.outerHTML;
Besteht someElement beispielsweise aus dem HTML <div>Hallo Tach</div> so enthält txt nach der Zuweisung exakt dieses HTML Fragment als Text: "<div>Hallo Tach</div>".
Syntax schreiben
someElement.outerHTML = "<p><strong>Hallo Tach</strong></p>";
Mit der Zuweisung wird das ursprüngliche Element durch einen Paragrafen mit "Hallo Tach" ersetzt, nicht ergänzt. Das ursprüngliche Element ist weg!
Nachlesen
innerText
innerText funktioniert im Prinzip genau so, wie textContent. Das Attribut dient dazu, Textinhalt zu lesen und zu setzen.
Allerdings gibt es ein paar subtile Unterschiede, die in Grenzfällen für Überraschungen sorgen können.
innerText berücksichtigt einige per HTML gesetzte Formatierungen. Beispielsweise wird beim Auslesen ein <br> in einen Zeilenumbruch "\n" umgewandelt und in den Text eingefügt.
Desgleichen werden Attribute zur Sichtbarkeit von Elementen ("hidden", "visibility: hidden" oder "display: none") berücksichtigt. Das führt dazu, dass innerText eine leere Zeichenkette liefert, wenn der Elementinhalt in der HTML Darstellung nicht angezeigt wird.
Damit liegt innertText bezogen auf die Berücksichtigung von HTML Markups irgendwo zwischen textContent und innerHTML.
Syntax lesen
let txt = someElement.innerText;
Nach diesem Statement enthält txt die Textinhalte aller Kindknoten von someElement. Allerdings nur, wenn der Inhalt der Knoten zum Zeitpunkt des Auslesens auch sichtbar ist. Ist z.B. bei someElement der Text versteckt, so ist txt leer.
Syntax schreiben
someElement.innerText = "Hallo Tach";
Nach diesem Statement ist der Textinhalt von someElement "Hallo Tach". Auch hier werden evtl. vorhandene Kindelemente von someElement überschrieben.
Nochmal der Hinweis: Am Besten gewöhnt man sich an, textContent in allen Standardfällen zu verwenden. Nur dann, wenn die spezielle Funktionalität von innerText wirklich gebraucht wird, sollte man darauf zurückgreifen.
Nachlesen
outerText
Das wohl am wenigsten brauchbare Attribut in diesem Zusammenhang.
Beim Lesen verhalten sich outerText und innerText exakt gleich.
Beim Schreiben wird allerdings nicht nur der Text im Element ersetzt, sondern das ganze Element - das betreffende Markup eingeschlossen.
Syntax lesen
let txt = someElement.outerText;
Nach dieser Zuweisung enthält txt den Textinhalt von someElement.
Syntax schreiben
someElement.outerText = "Hallo Tach;
Nach dieser Zuweisung existiert someElement nicht mehr. An der Stelle gibt es stattdessen einen Textknoten mit dem Inhalt "Hallo Tach".
Nachlesen
Zusammenfassung
Es gibt also 5 Möglichkeiten, Inhalte von Elementen zu modifizieren. Zu beachten ist, dass es sich in allen Fällen um Attribute und nicht um Funktionen handelt. Trotzdem werden Ein- und Ausgaben je nach verwendetem Attribut unterschiedlich aufgearbeitet, bevor sie irgendwo erscheinen.
Interessant, wenn auch für die Praxis nicht relevant, ist die Tatsache, dass die Attribute in 3 verschiedenen Interfaces bereit gestellt werden. textContent wird in Node definiert, innerHTML und outerHTML gehört zu Element, innertText und outerText dagegen zu HTMLElement. Auch diese Zugehörigkeit ist "gewachsen" und ansonsten nicht erklärbar.
Nicht relevant ist die Zugehörigkeit deshalb, weil wir es bei der täglichen Arbeit immer mit Objekten vom Typ HTMLElement zu tun haben - und da sind alle Attribute implementiert.
Trotzdem ist das Ganze undurchsichtig.
Gebrauchsanweisung
Nur textContent und innerHTML benutzen.
-
Will man nur den Text eines Elementes lesen oder schreiben, nimmt man
textContent.
Demgegenüber sollte man innerText vermeiden. Es verhält sich nicht unbedingt immer so, wie man es erwartet. -
Will man tatsächlich HTML lesen und schreiben, nimmt man
innerHTML.
Beim Lesen bekommt man das originale Markup mitsamt dem Inhalt. Beim Schreiben wird die "rendering engine" angeworfen und der Inhalt wird vor der Anzeige aufbereitet. -
Die beiden "outer*" Attribute sollte man tunlichst ganz vermeiden, wenn man nicht genau weiß, was man tut.
- outerHTML verändert die Struktur des Elements, mit dem man gerade arbeitet - nicht nur dessen Inhalt.
- outerText zerschießt das Element komplett.
Nachlesen
Attribute modifizieren
Modifizieren der Attribute von Elementen
Alle hier beschriebenen Funktionen und Attribute sind Mitglieder des Element Interfaces.
getAttributeNames()
Die Funktion getAttributeNames() liefert ein Array mit den Namen aller zu dem Element gehörenden Attribute.
Syntax
let resultArr = elmt.getAttributeNames();
Nachlesen
hasAttribute()
Die Funktion hasAttribute() prüft, ob eine bestimmtes Element ein bestimmtes Attribut besitzt.
Syntax
let bool = someElement.hasAttribute(attrName);
Geprüft wird die pure Existenz des Attributes, nicht dessen Wert. Existiert das Attribut, liefert die Funktion true zurück, ansonsten false.
Merke: Die Funktion liefert TRUE, wenn das Attribut existiert, auch wenn der Wert des Attributes FALSE ist.
Damit ahmt die Funktion das Verhalten eines Browsers nach, dem die Existenz eines Attributes ausreicht, um einen Schalter auf AN zu setzen.
Nachlesen
getAttribute()
Die Funktion getAttribute() ermittelt den Wert eines Attributes. Beim Aufruf muss der Name des Attributes übergeben werden.
Syntax
let value = someElement.getAttribute(attrName);
Die Variable value enthält danach den Wert des Attributes als String.
Das gilt auch für boolesche Attribute, nur ist dann value typischerweise leer.
Wenn das Attribut mit dem Namen attrName in someElement nicht existiert, ist value null.
Nachlesen
setAttribute()
Die Funktion setAttribute() wird benutzt, um ein neues Attribut oder den Wert eines existierenden Attributes zu setzen. (Man beachte die präzise Formulierung, sie kommt nicht von ungefähr.)
Beim Aufruf von setAttribut(name, value) für ein existierendes Attribut wird einfach der Wert gesetzt. Das ist zu erwarten.
Bei einem Aufruf für ein nicht existierendes Attribut, wird selbiges stillschweigend angelegt, und erhält den übergebenen Wert.
Die Funktion dient damit sowohl dem Ändern als auch dem Anlegen von Attributen. Es gibt kein separates updateAttribute und auch kein createAttribute.
Syntax
someElement.setAttribute(attrName, attrValue);
Die Syntax erfordert die Übergabe von zwei Argumenten. Das bedeutet, dass auch dann, wenn ein boolsches Attribut gesetzt werden soll, ein zweites Argument für den Wert übergeben werden muss. Das kann dann allerdings beliebig sein, ein leerer String, die Zahl 0 oder der Text "blahblah".
Nachlesen
removeAttribute()
Die Funktion removeAttribute() wird verwendet, um eine Attribute zu entfernen.
Bei "normalen" Attributen führt das dazu, dass das Attribut inklusive Wert aus der Attributliste des Elementes entfernt wird und dass darauf nict mehr zugegriffen werden kann.
Bei "boolschen" Attributen bedeutet das, dass das Attribut gegenüber als "falsch" angesehen wird.
Nur mit removeAttribute() lassen sich diese Attribute auf "falsch" setzen. setAttribute(XYZ, false) funktioniert dagegen nicht.
Syntax
someElement.removeAttribute(attrName);
Nachlesen
toggleAttribute()
Die Funktion toggleAttribute() wird verwendet, um boolsche Attribute umzuschalten. Was wahr war, wird falsch, was falsch war, wird wahr. Genauer: Wenn ein Attribut gesetzt war, wird es gelöscht und wenn es nicht gesetzt war, wird es angelegt.
Syntax
let afterOp = someElement.toggleAttribute(attrName);
Die Funktion liefert einen Rückgabewert, der anzeigt, ob das Attribut nach der Operation existiert oder nicht.
Die Funktion erspart einem das etwas mühsame hin und her Schalten mit einem if Statement.
Umständliches Alternative zu toggelAttribute()
IF hasAttribute(XX) THEN removeAttribute(XX) ELSE setAttribute(XX);
Der Aufruf von toggleAttribute() kann mit einem zusätzlichen Parameter versehen werden.
Syntax mit force
let afterOp = elmnt.toggleAttribute(attrName, force);
Wenn bei diesem Aufruf force auf true gesetzt ist, wird das Attribut angelegt, falls es noch nicht existiert. Es wird aber nicht entfernt, wenn es schon existiert.
Ist force dagegen false, so läuft das Ganze umgekehrt: Das Attribut wird entfernt, wenn es existiert, aber nicht angelegt, wenn es nicht existiert.
Der Rückgabewert ist true, wenn nach der Operation das entsprechende Attribut gesetzt ist, ansonsten wird false zurück geliefert.
Der force Parameter ist zwar eine boolsche Variable mit den zwei möglichen Werten true oder false, da der Parameter aber optional ist - und wir uns in JavaScript befinden - stellt er de fakto einen 3-Wege Schalter dar: "nicht vorhanden", "vorhanden-wahr", "vorhanden-falsch".
Es ist unter Umständen übersichtlicher, in diesem Fall doch die Funktionen setAttribute() und removeAttribute() in einem if Statement oder in Verbindung mit dem ? Operator zu verwenden.
Übersichtliche Alternative mit if
if (force) setAttribute(attrName) else removeAttribute(attrName);
Übersichtliche Alternative mit ?
force ? setAttribute(attrName) : removeAttribute(attrName);
Nachlesen
Die attributes Eigenschaft
Die attributes Eigenschaft des Element Interfaces zeigt auf eine Liste der zum HTML Element gehörenden Attribute.
Die Liste besteht aus Objekten, die das Attr Interface implementieren. Im Wesentlichen sind das die Eigenschaften name und value, die das beinhalten, was man erwartet: Den Namen und - wenn vorhanden - den Wert des Attributes.
Syntax
let attrList = someElement.attributes;
Die Eigenschaft ist nützlich, wenn man herausbekommen will, ob und wie viele Attribute ein Element hat, oder wenn man über alle Attribute iterieren will, um damit etwas zu machen.
Der Typ von attributes ist eine sog. NamedNodeMap. Das ist eine für den Umgang mit Attributen zugeschnittene Map, die auch Möglichkeiten bietet, Attribute zu setzen und zu löschen.
Es gibt für alle Operationen, die man mit attributes durchführen kann, spezialisierte Funktionen, die effizienter implementiert und einfacher zu benutzen sind.
Nachlesen
Das HTML Attribut "class"
Umgang mit Klassen
Das Attribut "class" eines HTML Elementes erfährt in JavaScript eine Sonderbehandlung. Es gibt im Interface Element zwei Eigenschaften, die speziell mit Klassen eines HTML Elementes umgehen.
Diese heißen className und classList.
className
Hinter className verbirgt sich ein String, der alle Klassennamen enthält, die zu einem HTML Element gehören. Die Namen sind durch Leerzeichen getrennt. Intern sieht diese Eigenschaft damit genau so aus, wie das entsprechende "class" Attribut in einem HTML Dokument.
Syntax
let classNames = someElement.className;
Der Haken bei der Verwendung von className ist die Tatsache, dass es ein String ist. Wenn man die Klassen eines Elementes manipulieren will, muss man String Operationen verwenden. Das ist umständlich und fehleranfällig.
Die Eigenschaft className gilt mittlerweile als veraltet und wird - bis auf wirklich merkwürdige Ausnahmesituationen - nicht benötigt, da mit der neueren classList sicherer und einfacher gearbeitet werden kann.
Nachlesen
classList
Die Eigenschaft classList ist eine Liste mit allen Klassen, zu denen das HTML Element gehört.
Syntax
let myClassList = someElement.classList;
Die Liste, die sich hinter classList verbirgt, ist eine sogenannte DOMTokenList. Eine DOMTokenList wiederum ist ein JavaScript Objekt, das diverse Operationen für die Manipulation der Liste bietet.
Die DOMTokenList ist kein Array, obwohl einige der Array Operationen auf die Liste angewendet werden können.
Nachlesen
Natürlich ist es gut, die offizielle Doku zu lesen. Aber die wenigen Eigenschaften, die man bei classList wirklich braucht, sind hier kurz beschrieben.
add()
Fügt eine - oder mehrere - Klasse(n) hinzu. Wenn eine Klasse schon existiert, wird sie übergangen.
Syntax
someElement.classList.add(someClass);
Wenn mehrere Klassen auf einmal angelegt werden sollen, so werden sie als getrennte Argumente übergeben.
remove()
Entfernt eine - oder mehrere - Klassen.
Syntax
someElement.classList.remove(someClass);
Wenn mehrere Klassen auf einmal entfernt werden sollen, so werden sie als getrennte Argumente übergeben.
replace()
Ersetzt eine Klasse durch eine andere.
Syntax
someElement.classList.replace(oldClass, newClass);
Die Funktion ersetzt eine Klasse nur dann, wenn sie auch existiert. Existiert sie nicht, passiert auch nichts.
Die Funktion liefert true, wenn ersetzt wurde, ansonsten false.
toggle()
Entfernt oder addiert eine Klasse, je nachdem, ob sie schon existiert oder nicht.
Syntax
let hasClass = someElement.classList.toggle(someClass);
In dieser Form funktioniert die Funktion so, wie erwartet. Existiert die Klasse someClass, wird sie entfernt. Existiert sie noch nicht, wird sie angelegt.
Die Funktion liefert true oder false zurück, je nachdem, ob das Element nach der Operation die Klasse enthält oder nicht.
Wie bei toggleAttribute() gibt es eine erweiterte Aufrufsyntax mit einem zusätzlichen Parameter force.
Syntax mit force
let hasClass = someElement.classList.toggle(someClass, force);
Die Logik hinter dem Parameter ist dieselbe, wie hinter toggleAttribute() und soll hier nicht noch einmal beschrieben werden.
Es gilt auch derselbe Hinweis, besser eine Kombination aus add() und remove() zu verwenden, um den Code klarer zu halten.
contains()
Prüft, ob eine bestimmte Klasse schon vorhanden ist.
Syntax
if (someElement.classList.contains(someClass)) { ... } ;
Die Funktion liefert true, wenn die Klasse existiert, ansonsten false.
Das HTML Attribut "style"
Umgang mit "styles"
Die Eigenschaft style eines Elementes repräsentiert das gleichnamige Attribut eines HTML Elementes.
D.h. mit dem style Attribut eines JavaScript Element Objektes kann man "inline" Styles lesen und modifizieren.
Es ist wichtig zu verstehen, dass style im JavaScript Interface nicht die aktuelle Ausprägung einer CSS Eigenschaft widerspiegelt, sondern den Inhalt des style Attributes eines HTML Elementes enthält, wie er in der HTML Datei beschrieben ist.
Beispiel mit style im head und auslesen im body
Technisch gesehen ist style vom Typ CSSStyleDeclaration. Das wiederum ist ein Interface, über das auf alle - ich betone: alle - CSS Eigenschaften eines Elementes zugegriffen werden kann.
Das Interface enthält für jede CSS Eigenschaft eine eigene gleichnamige Eigenschaft.
Gleichnamig? Nicht ganz. Ist der Name der Eigenschaft in CSS zusammen gesetzt (BSP: "background-color") und per Bindestrich verbunden, so wird er in JavaScript per CamelCase abgebildet (BSP: "backgroundColor").
Syntax lesen der Textfarbe
let oldColor = someElement.style.color;
Man sollte mit element.style nicht zu freizügig umgehen, es wird schnell undurchsichtig. Herauszufinden, warum ein bestimmtes Element plötzlich rot ist, obwohl im CSS keinerlei Hinweis darauf vorhanden ist, kann richtig aufwendig werden. Man sollte normalerweise die gewünschten "styles" im CSS einer Klasse zuordnen und dann in JavaScript die Klassenzugehörigkeit anpassen.
Syntax setzen der Textfarbe
someElement.style.color = "yellow";
Nachlesen
Das DOM modifizieren
Das "Document Object Model" ist ein Abbild der Struktur einer HTML Seite im Browser. Das DOM wird erzeugt, wenn der Browser die Seite liest und kann hinterher per JavaScript modifiziert werden.
Das DOM ist eine Baumstruktur, in der jedes Element seinen Platz hat.
Das oberste Element wird in der HTML Datei durch das Markup <html> gekennzeichnet. Eine Stufe tiefer befinden sich die Element <head> und <body>. In 99% der Fälle dreht es sich um Elemente unterhalb von <body> wenn man das DOM modifiziert.
Auf der JavaScript Seite wird das DOM durch das Objekt document repräsentiert. Dieses Objekt wiederum implementiert das Interface Document, das man benutzen kann um das DOM von JavaScript aus zu modifizieren.
Das Objekt document ist ein Attribut des in JavaScript immer vorhandenen "globalen Objektes". Das "globale Objekt" stellt auch den "globalen Scope" dar, so dass man in JavaScript überall auf document und alle seine EIgenschaften zugreifen kann.
Nachlesen
Bei der Modifikation des DOM geht es im Wesentlichen darum, Elemente einzufügen, zu löschen oder zu verschieben.
Die meisten der dazu verwendeten Funktionen sind auf der Ebene einzelner Elemente implementiert. Einige wenige Funktionen gibt es nur für das oberste Element, das document.
Elemente hinzufügen
Neue Elemente einfügen oder Alte bewegen
Die in diesem Abschnitt vorgestellten Funktionen dienen dazu, Elemente unterhalb eines Zielelementes einzufügen.
Die Funktionen sind dazu gedacht, neue Elemente, die z.B. mit createElement() erzeugt wurden, in das DOM einzuhängen.
Übergibt man als Argument ein Element, das an andere Stelle schon existiert - z.B. ein Element das per getElementById() ermittelt wurde, so wird es an der alten Stelle gelöscht bevor es an der neuen Stelle eingefügt wird. Insgesamt ergibt das eine move Operation. Dabei wird das Element mit allen seinen Attributen und allen Kindelementen bewegt.
append()
Die append() Funktion eines Elementes ist die einfachste Methode, um Elemente unter ein anderes Element zu hängen. Sie hängt ein neues Element an das Ende aller Unterelemente in dem referenzierten Element an.
Die Funktion kann mit einem oder mehreren Argumenten aufgerufen werden, wobei auch Strings erlaubt sind und sie liefert keinen Rückgabewert.
Syntax: Element anhängen
someElement.append(anotherElement);
Syntaktisch muss das übergebene Argument vom Typ Node sein, was bei allen Objekte der Fall ist, die z.B. mit createElement() oder den getElement*() Funktionen geliefert werden.
Es besteht die Möglichkeit, append() mit einem String zu füttern, der dann als Textknoten eingefügt wird.
Syntax: Text anhängen
someElement.append("Hallo Tach");
Als letztes noch der Hinweis, dass man beim Aufruf von append() gleich mehrere Elemente übergeben kann, die dann nacheinander hinter einem evtl. schon vorhandenen Kindelement angehängt werden
appendChild()
appendChild ist im Node Interface implementiert und macht im Wesentlichen das Gleiche, wie append().
Syntax: Element anhängen
let newElement = someElement.appendChild(anotherElement);
Ein wesentlicher Unterschied zwischen den beiden Funktionen ist, dass appendChild() sein eigenes Argument zurück liefert, so dass in diesem Fall newElement und anotherElement das Selbe beinhalten. Daher kann man mit der Funktion bequem eine Baumstruktur unterhalb eines Elementes aufbauen. Wenn man denn so etwas vorhat.
Syntax: Baumstruktur aufbauen
someElement
.appendChild(document.createElement("div"))
.appendChild(document.createElement("p"))
.appendChild(document.createElement("span"));
Nachlesen
prepend()
Die Funktion prepend() dient dazu, Elemente unterhalb eines Zielelementes am Anfang einzuhängen.
Wie append() ist die Funktion dazu gedacht, neue Elemente, die z.B. mit createElement() erzeugt wurden, einzufügen. Allerdings nicht hinter dem letzten Kindelement des Elementes, für das sie aufgerufen werden, sondern davor.
Syntax: Element einhängen
someElement.prepend(anotherElement);
Der einzige Unterschied zu append() ist die Stelle wo das Element, die Elemente oder der Text eingefügt wird. Ansonsten verhalten sich die beiuden Funktionen gleich: Kein Rückgabewert, mehrere Parameter und die Möglichkeit Strings zu übergeben.
Es gibt kein prependChild().
Nachlesen
after()
Die Funktion after() fügt ein Element auf der selben Ebene direkt hinter dem Element ein, für das sie aufgerufen wurde.
Syntax
someElement.after(anotherElement);
someElement und anotherElement liegen auf derselben Ebene, haben also dasselbe Elternobjekt, und anotherElement liegt in der Liste der Kindelemente des Elternobjektes direkt hinter someElement.
Nachlesen
before()
Die Funktion before() fügt ein Element auf der selben Ebene direkt vor dem Element ein, für das sie aufgerufen wurde.
Syntax
someElement.before(anotherElement);
someElement und anotherElement liegen auf derselben Ebene, haben also dasselbe Elternobjekt, und anotherElement liegt in der Liste der Kindelemente des Elternobjektes direkt vor someElement.
Nachlesen
insertBefore()
Auch wenn die Namen recht ähnlich sind, funktioniert insertBefore() deutlich anders als das einfache before().
insertBefore() ist ein Multitalent, das dazu benutzt werden kann, Elemente an beliebigen Stellen in der Kindliste eines Elternelementes einzufügen. In der Praxis heißt das, dass man mit insertBefore() die anderen Operationen zum Einfügen nachbauen kann.
Syntax allgemein
parentElement.insertBefore(newElement, refElement);
Hier bezeichnet parentElement, wie der Name schon sagt, das Elternelement, unter dem die Operation stattfinden soll. newElement ist das Element, das eingefügt werden soll und refElement ist das Kindelement, vor dem das neue Element platziert wird.
Übergibt man statt eines Elementes den Wert null als Referenzelement, so wird das neue Element am Ende eingefügt.
Syntax à la append
parentElement.insertBefore(newElement, null);
Dieser Code bewirkt das Gleiche, wie parentElement.append(newElement)
Genauso kann man sich ein prepend() zurecht tricksen.
Syntax à la prepend
parentElement.insertBefore(newElement, parentElement.firstChild);
Hier wird das erste Kindelement des Elternelementes als Referenz übergeben.
Dieser Code bewirkt das Gleiche, wie parentElement.prepend(newElement), d.h. das neue Element wir vor allen anderen als Kindelement eingefügt.
Es gibt kein insertAfter().
Bei mdm gibt es ein Beispiel für eine Emulation eines insertAfter.
Nachlesen
Elemente löschen
Für das Löschen von Elementen aus dem DOM werden nicht gar so viele Funktionen bereit gestellt. Nur zwei, um genau zu sein.
remove()
Die remove() Methode löscht das Element, für das sie aufgerufen wird.
Die Funktion hat keinen Parameter und keinen Rückgabewert.
Syntax
someElement.remove();
Mit diesem Aufruf wird someElement aus dem DOM entfernt.
Nachlesen
removeChild()
Wie der Name andeutet, wird removeChild() verwendet, wenn man Kinder eines Elternelementes entfernen will.
removeChild() wird für das Elternelement aufgerufen, bekommt das zu löschende Kindelement als Parameter und liefert das gerade gelöschte Element zurück.
Syntax
removedElement = someElement.removeChild(childElement);
childElement ist nach diesem Statement mit allen seinen Kindelementen aus dem DOM verschwunden und wird im Browser nicht mehr angezeigt. Das Element an sich - seine Struktur und seine Inhalte - existiert aber noch und kann über die Variable removedElement in JavaScript angesprochen werden.
Auch evtl. damit verbundenen EventListener existieren weiter!
Damit das Ganze funktioniert, muss childElement ein Kindelement von someElement sein.
Nachlesen
Elemente ersetzen
replaceWith()
replaceWith() ersetzt das Element, für das es aufgerufen wird, durch ein anderes Element, das als Argument übergeben wird.
Syntax
someElement.replaceWith(anotherElement);
Mit diesem Aufruf wird someElement durch anotherElement ersetzt.
replaceChildren()
replaceChildren() ersetzt alle Kindelemente des Elements, für das es aufgerufen wird, durch ein oder mehrere andere Elemente.
Die Funktion kann mit einem, mit keinem oder mit vielen Argumenten gefüttert werden.
Syntax
someElement.replaceChildren(anotherElement);
Mit diesem Aufruf werden alle Kinder von someElement durch anotherElement ersetzt.
Syntax löschen
someElement.replaceChildren();
Mit diesem Aufruf werden alle Kinder von someElement durch "nichts" ersetzt, d.h. gelöscht.
Syntax mehrere Elemente
someElement.replaceChildren(el1, el2, el3);
Mit diesem Aufruf werden alle Kinder von someElement durch die Elemente el1, el2, el3 ersetzt.
Syntax mehrere Elemente als Array
someElement.replaceChildren(...elementArray);
Mit diesem Aufruf werden alle Kinder von someElement durch die Elemente ersetzt, die in elementArray enthalten sind.
replaceChild()
Die Funktion replaceChild() ersetzt ein spezielles Kindelement des Elements, für das sie aufgerufen wird, durch genau ein anderes Element.
Der Rückgabewert ist das gerade ersetzte alte Element.
Das zu ersetzende und das neue Element werden als Argumente übergeben.
Syntax
replacedChild = someElement.replaceChild(someChild, anotherElement);
Hier wird someChild von someElement durch anotherElement ersetzt.
Das ersetzte Element ist nach diesem Statement immer noch komplett erhalten - nur im Browser nicht mehr sichtbar - und kann über die Variable replacedElement in JavaScript angesprochen werden.
Wenn anotherElement schon im DOM eingehängt war, so wird es verschoben und an der alten Stelle im DOM ausgehängt.
Nachlesen
Was fehlt
Alles