DOM Zugriffe

Der Text wird aus dem Eingabefeld in das Ausgabefeld übertragen.

getElementById ist die meistgebrauchte Zugriffsmethode auf ein Element.

Der Funktion wird die ID des Elements übergeben. Es wird die Struktur des Elements zurückgeliefert.

Je nach Element kann man dann mit value z.B. beim input-Element, oder mit firstChild.nodeValue z.B. bei p-Elementen auf den Inhalt zugreifen oder diesen setzen.

In der Regel weiß man welches Element man hat. Ist dies micht bekannt, wie z.B. bei der Anwendung mehrsprachige WEB-Seite kann mit document.getElementById("ID").hasChildNodes() abgefragt werden ob es childNodes gibt. Wenn ja muss mit document.getElementById("ID").firstChild.nodeValue gearbeitet werden, sonst mit value.

uebernahme()

Mit querySelector oder querySelectorAll kann man die Elemente mit den CSS-Selectoren ansprechen.

Hier eine Liste, bei der jeder Eintrag ein Link ist. Wird auf den Link geklickt wird in einem Fenster die komplette Liste angezeigt und der selectierte Eintrag markiert. Sinnvoll ist das, um nicht nur den geklickten Eintrag zu verarbeiten, sondern die komplette Liste. Siehe dazu auch Auswahlliste mit DOM bearbeiten

• Listeneintrag 1
• Listeneintrag 2
• Listeneintrag 3
• Listeneintrag 4

Die Liste hat die id=querySel

Mit dem CSS-Selector #querysel li wird auf die Listenpositionen zugegriffen.

querySel()

Die Tabelle hat die id=queryCell Mit dem CSS-Selector #queryCell tr wird auf die Tabelle zugegriffen.

Mit querySelectorAll werden alle Zeilen in ein Array gelesen. Dies wird dann in einer for Schleife abgearbeitet.

  var v_zeilen = document.querySelectorAll("#queryCell tr");            // Array mit allen Zeilen

Mit first-child wird auf das erste Element der Tabelle zugegriffen (Überschrift).

  var v_ueberschrift = document.querySelector("#queryCell tr:first-child"); // Erste Zeile

Mit nth-child wird auf das n Element der Tabelle zugegriffen.

  var v_zeile2 = document.querySelector("#queryCell tr:nth-child(2)");      // Zweite Zeile

Mit last-child wird auf das letzte Element der Tabelle zugegriffen (Letzte Zeile z.B. Summenzeile).

  var v_summe = document.querySelector("#queryCell tr:last-child");         // Letzte Zeile

Der Button Lesen zeigt die Resultate an.

queryCell()

Oft wird eine Tabelle angezeigt, aus der dann ein Datensatz ausgewählt werden kann und diesen z.B. in einem Formular bearbeiten zu können. Beispiel unter Accountverwaltung.

In der Tabelle hat jede Datenzeile eine ID trID. Wenn die Tabelle aus AJAX erstellt wird, bietet sich hierzu die Satz-ID aus der Datenbank an. In diesem Beispiel wurde tr1017, tr1018 und tr1019 gesetzt.

Auf jede ID wurde ein Eventlistener installiert, der die Funktion tabBearbeiten aufruft. Beim Klick in eine Zelle wird das Event von td an tr weitergegeben. Damit wird die Funktion des Eventlistener von tr aufgerufen. Allerdings wird hier auch die ID der Zelle übergeben.

Deshalb hat jede Zelle eine ID bekommen - td00 und die SatzID - also für Spalte 1 td001017, td001018, td001019 und für Spalte 2 td011017, td011018, td011019 usw.

In der Funktion tabBearbeiten wird aus der übergeben ID (z.B. td001018) mit substr die Satz-ID ermittelt (1018).

Mit document.querySelector("#tr" und der Satz-ID wird auf die Zeile positioniert.

Mit cells[NR].firstChild.nodeValue wird der Inhalt der Zelle gelesen. NR beginnt bei 0

Wird nur der Inhalt der geklickten Zelle benötigt, kann mit document.querySelector der übergeben target.id und firstChild.nodeValue dieser direkt gelesen werden (siehe v_zellInhalt).

Tabellen-Tag tabBearbeiten()

Nach der Eingabe von Spalten und Zahlen werden die Elemente mit DOM in einem div hinzugefügt.

Bei den Spalten wird ein Eventlistener erzeugt, der die Funktion klickZelle aufruf. Damit der Link die ganze Zelle einnimmt muss in CSS beim a display:inline-block; gesetzt werden.

Damit in der Funktion klickZelle wieder auf den Zelleninhalt zugegriffen werden kann setze ich den Inhalt als ID. In der Funktion kann dann mit eventObjekt.target.id auf den Zelleninhalt zugegriffen werden. Dies z.B. beim Kalender nützlich.

Je nach Anwednungsfall kann man auch eine ID auf die Zeile (Element tr) legen.

Dies bietet sich bei Datensätzen an, wenn man so wie so eine ID hat, kann man die ID trID setzen. Dann kan man mit querySelector oder querySelectorAll auf die Tabelle zugreifen. Siehe dazu den folgenden Artikel Tabelle mit DOM lesen.

Button Erstellen

Es wird eine Tabelle mit Anzahl Spalten und Anzahl Zeilen eingefügt.

Die Tabelle wird mit der Funktionen addElement erzeugt. Siehe auch die Beschreibung dazu.

tabErstellen()

Button Löschen

Es wird die Tabelle in dem div gelöscht.

tabLoeschen()

Bei der Select-Liste wird mit document.getElementById("selectliste").value die ID des Selected Eintrags abgefragt.

Um den Text zu lesen muss über selectedIndex gelesen werden.

Select-Tag selectAnzeigen()

Bei Radiobuttons müssen alle Möglichkeiten mit if und checked = true abgefragt werden.

Radio-Tag radioAuswahl()

Auf der checkbox ist ein Eventlistern installiert, der bei jedem Change die Funktion checkBox aufruft.

document.getElementById("boxCheck").addEventListener("change", checkBox, false);

abgehakt

checkBox()

Hier ist beschrieben, wie mit DOM auf eine Auswahlbox zugegriffen werden kann.

Es wird der selektierte Eintrag gelesen, Einträge hinzugefügt oder gelöscht.

Button Add

Der Wert aus Eintrag wird der Liste in Auswahl hinzugefügt.

Ein Eintrag in der Auswahl wird mit new Option() hinzugefügt

new Option() kennt vier Parameter von denen die drei letzten Parameter optional sind.

1. text = angezeigter Text in der Liste

2. value = zu übertragender Wert der Liste (optional)

3. defaultSelected: Wenn true ist der Eintrag vorselektiert (optional)

4. selected: Wenn true ist der Eintrag in der Liste selektiert (optional)

aboxAdd()

Button Sel

Der selektierte Eintrag in Auswahl wird nach Eingabe übernommen.

Wie folgt kann auf die Auswahl der Box zugegriffen werden.

pos = document.getElementById("auswahl").selectedIndex; Selectierter Indexwert Erster Eintrag = 0

id = document.getElementById("auswahl").value; Id = Parameter 2 der Auswahl

text = document.getElementById("auswahl").options[pos].text; Text = Parameter 1 der Auswahl

Mit der Funktion aboxSel wird der selectierte Eintrag in das Feld Eingabeübernommen.

Mit value wird der zweite Parameter (ID) aus new Option übertragen. Um auf den Text zugreifen zu können, muss der selektierte Eintrag über selectedIndex gelesen werden. Mit options[v_pos].text wird dann der angezeigte Inhalt gelesen.

aboxSel()

Button Del

Der selektierte Eintrag in Auswahl wird gelöscht.

Mit der Funktion aboxDel wird der selectierte Eintrag gelöscht. Alle Einträge der Box werden automatisch um eins hochgeschoben werden.

aboxDel()

Button Liste Del

Die komplette Liste in Auswahl wird gelöscht.

In anz wird die Anzahl der Einträge gespeichert.

Hier wird eins abgezogen, da in der Schleife der Eintrag anz auf NULL gesetzt wird.

Dritter Eintrag hat den Index 2

Erster Eintrag den Index 0

Alternativ kann auch elementLeer("aboxauswahl") verwendet werden.

aboxDelGes()

Hier ist beschrieben, wie mit DOM auf eine Auswahlliste zugegriffen werden kann und zwischen gewählten und nicht gewählten Einträgen gewechselt wird. Statt den ul_Listen kann auch das zuvor beschriebene select-Element verwendet werden.

Die Auswahlliste ist eine ul-Liste in einem div.

Mit Lesen wird eine XML-Datei mit den Werten eingelesen.

In der Praxis wird dies ein AJAX-Aufruf in eine Datenbank sein. Dabei ist es sinnvoll bei einer Änderung die Liste über Ajax neu einzulesen und die Listen neu aufzubauen. Dies bewirkt aber einen Datentransfer, der sich auf die Reaktionszeit auswirken kann.

Sind die Daten schon mal auf dem Client kann mit den vorhanden Einträgen gearbeitet werden. Dabei gibt es die Möglichkeit die Listeneinträge direkt zu verwenden oder die Listen in ein Array einzulesen. Die Arrayvarianten ist besser zu handhaben und wird von mit bevorzugt.

Da es bei den Listen kein "Selected Eintrag" gibt, kann eine Funktion nur mit Klick auf den Eintrag durchgeführt werden.

Direkte Bearbeitung der Listeneinträge

Mit dem Button Liste lesen wird die Funktion alisteLesenDirekt aufgerufen. Diese Funktion erzeugt den Ajax-Request um die Datei aliste.xml zu lesen. Ist die Datei gelesen wird mit der Funktion alisteShowDirekt die Daten in die jeweiligen div aufgenommen und angezeigt. Normalerweise wird der AJAX-Request aus einer Datenbank lesen.

alisteLesenDirekt() alisteShowDirekt() aliste.xml

Funktionsweise

Klick auf einen Eintrag verschiebt den Eintrag von Gewählte Einträge nach Nicht gewählte Einträge bzw. umgekehrt.

Bei der Erstellung der Einträge wurde für jeden Eintrag eine ID hinterlegt. Die ID ist der Eintragtext. Dies funktioniert natürlich nur bei eindeutigen Einträgen. Aber Mehrfacheinträge in einer Auswahlliste sind eh sinnlos.

Für jeden Eintrag wurde ein Eventlisterner installiert. Dabei rufen die Evenlistener für die gewählten Einträge die Funktion alisteAendernDirektG auf und die Evenlistener für die nicht gewählten Einträge die Funktion alisteAendernDirektN auf.

In diesen beiden Funktionen wird die Variable v_eintrag über das Eventobjekt mit der ID aus dem angeklickten Eintrag belegt. Die beiden Variablen v_add und v_del werden mit der jeweiligen ID des div für gewählte Gruppen und für nicht gewählte Gruppen belegt. Mit diesen drei Variablen wird die Funktion alisteAendernDirekt zur Änderung der Gruppen aufgerufen.

In der Funktion alisteAendernDirekt werden mit document.querySelector und der übergebenen ID die ul-Elemente für die beiden Listen gelesen.

Dann wird mit document.querySelectorAll alle Einträge der entsprechenden Liste gelesen.

Jetzt wird an die Liste bei der der Eintrag hinzugefügt werden soll ein li-Element angehängt. Anschließend wird die Liste von hinten gelesen und solange der neue Eintrag größer ist als der aktuelle, der aktuelle Eintrag eins nach hinten geschoben. Damit wird der neue Eintrag einsortiert.

Bei der Liste, in die geklickt wurde, wird auf den geklickten Eintrag positioniert. Dann wird bis zum Ende der Liste der nächste Eintrag um eins nach oben geschoben und der letzte Eintrag gelöscht.

Funktionen anzeigen

Listeneinträge im Array

Mit dem Button Liste lesen wird die Funktion alisteLesenArray aufgerufen. Diese Funktion erzeugt den Ajax-Request um die Datei aliste.xml zu lesen. Ist die Datei gelesen, wird mit der Funktion alisteArray die Treffer in ein Array eingetragen. Zu jedem Eintrag wird gespeichert, ob er gewählt ist oder ob er nicht gewählt ist. Normalerweise wird der AJAX-Request aus einer Datenbank lesen.

Danach werden mit der Funktion alisteAnzeigenArray die Daten angezeigt. Ist der zweite Eintrag des Array ja wird der Eintrag in gewählte Einträge angezeigt. Ist der zweite Eintrag des Array nein wird der Eintrag in nicht gewählte Einträge angezeigt.

alisteLesenArray() alisteArray() alisteAnzeigenArray() aliste.xml

Funktionsweise

Klick auf einen Eintrag verschiebt den Eintrag von Gewählte Einträge nach Nicht gewählte Einträge bzw. umgekehrt.

Bei der Erstellung der Einträge mit der Funktion alisteAnzeigenArray wurde für jeden Eintrag eine ID hinterlegt. Die ID ist der Eintragtext. Dies funktioniert natürlich nur bei eindeutigen Einträgen. Aber Mehrfacheinträge in einer Auswahlliste sind eh sinnlos.

Für jeden Eintrag wurde ein Eventlisterner installiert der die Funktion alisteAendernArray aufruft.

In dieser Funktion wird das Array durchlaufen. Wenn der Arrayeintrag mir der ID des gewählten Eintrags übereinstimmt wird der Modus von ja in nein oder von nein in ja geändert.

Danach wird mit der Funktion alisteAnzeigenArray die Daten in den jeweiligen Listen neu angezeigt.

alisteAendernArray()

In einem div wird ein link mit JavaScript und DOM hinzugefügt.

In diesem Beispiel wird nicht meine Funktion addElement verwendet. Es sind hier alle notwendigen Schritte in JavaScript aufgeführt.

addLink()

In einem div wird ein Bild mit JavaScript und DOM hinzugefügt.

In diesem Beispiel wird nicht meine Funktion addElement verwendet. Es sind hier alle notwendigen Schritte in JavaScript aufgeführt.

addBild()

In einem div wird ein link mit einem Bild mit JavaScript und DOM hinzugefügt.

In diesem Beispiel wird nicht meine Funktion addElement verwendet. Es sind hier alle notwendigen Schritte in JavaScript aufgeführt.

addBildLink()

Bei diesem Link wird die Textfarbe bei jedem Klick von schwarz nach rot geändert.

schwarz

farbeAendernID()

Bei diesem Text werden die Attribute angezeigt.

Die Funktion liest den Text und die Attribute des Absatze mit der id absatz1 Die Farbe wird erst angezeigt, wenn sie auch explizit mit Javascript gesetzt wurde.

Um CSS-Attribute zu lesen, die nicht explizit mit JavaScript gesetzt wurden, wird window.getComputedStyle(element) verwendet.

Dies ist Text im Absatz 1

attrAbsatz1()