JavaScript-DOM-Tutorial
- Das DOM (Document Object Model) ist eine plattform- und sprachenunabhängige Schnittstelle, die es Skripten erlaubt, dynamisch auf HTML-Dokumente zuzugreifen und deren Inhalt, Struktur und Aussehen zu verändern
- Beim Laden einer Webseite erstellt der Browser aus dem HTML-Dokument das DOM, eine Baumstruktur von Objekten, basierend auf den HTML-Elementen
- Mit JavaScript kann über das DOM auf einer HTML-Seite zugegriffen und deren Elemente, Attribute und Events sowie CSS-Anweisungen manipuliert werden
- ...mehr lesen...
- Wenn eine Webseite geladen wird, erstellt der Browser aus dem HTML-Dokument das DOM (Document Object Model)
- Mit Hilfe von JavaScript kann auf alle Elemente (Knoten) im DOM zugegriffen und diese manipuliert werden
- Über die Referenz auf ein Element können die Knoten-Eigenschaften, wie der Inhalt und das Aussehen von Knoten, ausgelesen und verändert werden
- Über das DOM können auch Elemente zu einer Webseite hinzugefügt oder von ihr entfernt werden
- ...mehr lesen...
- Im DOM sind alle HTML-Elemente einer Webseite als Objekte in einer Baumstruktur definiert, auf die mit Hilfe von JavaScript zugegriffen werden kann
- Mit der Methode „getElementById()“ kann über das „id“-Attribut des HTML-Elements auf ein HTML-Element zugegriffen werden
- Die Methode „getElementsByTagName()“ gibt eine Liste der HTML-Elemente zurück, die dem in der Klammern angegebenen Element-Typ entsprechen
- Die Methode „getElementsByClassName()“ gibt eine Liste der HTML-Elemente zurück, deren „class“-Attribut den in der Klammer angegebenen Wert haben
- Die Methode „getElementsByName()“ gibt eine Liste der HTML-Elemente zurück, deren „name“-Attribut den in der Klammer angegebenen Wert hat
-
Die Methode „querySelectorAll()“ gibt eine Liste der HTML-Elemente zurück, für die eine bestimmter CSS-Selektor gilt
- ...mehr lesen...
- Im DOM werden alle HTML-Elemente eines HTML-Dokuments als Objekte definiert und in einer Baumstruktur angeordnet
- Mit der Eigenschaft „innerHTML“ kann der Inhalt von HTML-Elementen ausgegeben oder geändert werden
- Mit der Eigenschaft „nodeName“ kann der Element-Typ von HTML-Elementen ausgegeben werden
- Mit der Eigenschaft „nodeType“ kann der Objekt-Typ von DOM-Objekten ausgegeben werden
- Mit der Eigenschaft „nodeValue“ kann der Wert von DOM-Objekten ausgegeben werden
- ...mehr lesen...
- Im DOM werden alle HTML-Elemente eines HTML-Dokuments als Objekte dargestellt und in einer Baumstruktur angeordnet
- Mit der Eigenschaft „parentNode“ kann das übergeordnete Objekt und mit „parentElement“ das übergeordnete Element ausgegeben werden
- Mit der Eigenschaft „childNodes“ können alle untergeordneten DOM-Objekte und mit „children“ alle untergeordneten HTML-Elemente eines Objekts ausgegeben werden
- Mit der Eigenschaft „firstChild“ kann das erste untergeordnete und mit „lastChild“ das letzte untergeordnete Objekt ausgegeben werden
- Mit der Eigenschaft „firstElementChild“ kann das erste untergeordnete und mit „lastElementChild“ das letzte untergeordnete HTML-Element ausgegeben werden
- Mit der Eigenschaft „previousSibling“ kann das vorher-gehende Geschwister-Objekt und mit „nextSibling“ das nachfolgende Geschwister-Objekt ausgegeben werden
- Mit der Eigenschaft „previousElementSibling“ kann das vorhergehende Geschwister-HTML-Element und mit „nextSibling“ das nachfolgende Geschwister-HTML-Element ausgegeben werden
- Mit der Methode „hasChildNodes()“ kann ermittelt werden, ob ein Objekt Kind-Objekte hat oder nicht
- ...mehr lesen...
- Über die DOM-Objekte kann auf die Attribute der korrespondierenden HTML-Elemente zugegriffen werden
- Es gibt Attribute, die direkt über das korrespondierende DOM-Objekt ausgelesen und gesetzt werden können, wie „id“, „className“ und „value“
- Alle DOM-Objekte verfügen über ein Attribut-Objekt, welches einer Liste aller Attribute des korrespondierenden HTML-Elements entspricht
- Mit Hilfe der DOM-Objekt-Methoden „getAttribute(‚attr‘)“ und „setAttribute(‚attr‘, ‚wert‘)“ können die Attribute der korrespondierenden HTML-Elemente ausgelesen und gesetzt werden
- Mit den Methoden „getAttributeNode()“ und „setAttributeNode()“ können HTML-Element-Attribute über das Attribut-Objekt des korrespondierenden DOM-Objekts ausgelesen und angepasst werden
- Mit der Methode „hasAttribute(‚attr‘)“ kann geprüft werden, ob ein Objekt ein bestimmtes Attribut hat und mit der Methode „hasAttributes()“, ob ein Objekt überhaupt Attribute hat
- Mit der Methode „removeNamedItem(‚attr‘)“ des Attribut-Objekts kann ein bestimmtes Attribut aus der Attribut-Liste entfernt werden
- Mit der Methode „removeAttributeNode()“ kann ein bestimmtes Attribut von einem Element entfernt werden
- ...mehr lesen...
- Ereignisse treten ein, wenn Besucher auf Webseiten bestimmte Aktionen ausführen, wie z. B. das Anklicken eines Button
- Über das DOM ist es möglich, mit Hilfe von JavaScript, Ereignis-Attribute für HTML-Elemente zur Laufzeit zu definieren
- Mit der Methode „addEventListener()“ können zur Laufzeit für HTML-Elemente und DOM-Objekte (wie z. B. dem „window“-Objekt) Ereignis-Attribute definiert werden
- Dabei können mit der Methode „addEventListener()“ auch für ein Element bzw. Objekt mehrere unterschiedliche Ereignis-Attribute und mehrere Funktionen für das selbe Ereignis-Atrribut definiert werden
- Mit der Option der Methode „addEventListener()“ kann bei verschachtelten HTML-Elementen festgelegt werden, in welcher Reihenfolge die Ereignisse abgearbeitet werden
- Mit der Methode „removeEventListener()“ können Funktionen von Ereignis-Attributen wieder entfernt werden
- ...mehr lesen...
- Über die DOM-Objekte kann das Aussehen (der Style) der HTML-Elemente manipuliert werden
- Über das „style“-Attribut der DOM-Objekte können die Style-Informationen des korrespondierenden HTML-Elements ausgelesen oder gesetzt werden
- Mit „.getElementsByTagName(‚style‘).innerHTML“ kann ein vorhandenes „style“-Element ausgelesen und gesetzt werden
- Mit „document.createElement(‚style‘)“ kann ein neues „style“-Element erstellt werden
- ...mehr lesen...
- Über das DOM können Elemente mit Hilfe von JavaScript zu einer Webseite hinzugefügt, von ihr entfernt oder ausgetauscht werden
- Mit der Methode „document.createElement()“ kann ein neues Element erstellt werden
- Mit der Methode „appendChild()“ kann ein Element einem anderen Element hinzugefügt werden
- Mit der Methode „insertBefore()“ kann ein neues Element einem existierenden Element hinzugefügt werden, wobei hier das neue Element an den Anfang eingefügt wird
- Mit der Methode „removeChild()“ kann ein Element aus seinem übergeordneten Element entfernt werden
- Mit der Methode „replaceChild()“ kann ein Element durch ein anderes Element ausgetauscht werden
- ...mehr lesen...
- Als Abschluss-Übung für das Tutorial „JavaScript-DOM“ wird Schritt für Schritt eine kleine Anwendung entwickelt
- Bei dem kleinen an Pac-Man angelehnten Spiel muss der Anwender mit den vier Button „oben“, „links“, „rechts“ und „unten“ die gelbe Kugel so bewegen, dass sie mit den blauen Kugeln zusammenstößt
- Durch den Zusammenstoß werden die blauen Kugeln dann gelöscht
- Sind alle blauen Kugeln gelöscht, wird die benötigte Zeit rechts oben angezeigt
- Mit dem „Start“-Button kann ein Durchgang gestartet und mit dem „Reset“-Button die Anwendung zurückgesetzt werden
- ...mehr lesen...