Arbeit mit DOM-Knoten & Javascript

nodes einer Webseite lesen & ändern

Hier wird vorgestellt, wie DOM-Knoten manipuliert werden. Voraussetzung ist, dass die gewünschten Knoten vorher adressiert wurden.
DOM & Javascript Zugriff auf alle Elemente einer Webseite
Eigenschaften Standard-Eigenschaften jedes Knotens
Adressierung von DOM-Knoten Knoten gezielt aufsuchen
Löschen von DOM-Knoten DOM-Knoten aus einem Baum entfernen
Neue DOM-Knoten Neue DOM-Knoten anlegen und "einhängen"
Spezialfälle:  
Attribute
Attribute von DOM-Knoten
Textknoten
#text-Knoten sind die "Endpunkte" im DOM-Baum
style-Objekt
Das style-Unterobjekt von DOM-Knoten
styleSheets-Objekt
In styleSheet-Objekten sind CSS-Regeln festgelegt
Beispiel Text interaktiv in eine Webseite schreiben

Standard-Eigenschaften von DOM-Knoten
Unabhängig von der Art eines Knotens verfügt jeder DOM-Knoten über einige Standard-Eigenschaften.

Testen sie ihr DOM-Verständnis:
Wieviele childNodes enthält der Knoten id="t6" im Beispiel rechts ?
<div id="t6">
Das ist ein
<span style="color:red;">DOM</span>
-Knoten
</div>
So sieht das Beispiel Live aus:
Das ist ein DOM-Knoten
Die Funktion get_info im Beispiel rechts analysiert einige Eigenschaften des mit seinem id-Attribut adressierten Knotens (hier id="t5" ) und zeigt sie in einem Alarmfenster an. Das kleine Programm ist beim Debuggen hilfreich.

• Zunächst wird in function get_node_info der Start-Knoten mit getElementById identifiziert.
• Mit diesem Knoten als Argument wird function get_node_info$ aufgerufen:
• Vom übergebenen Knoten werden die Eigenschaften nodeName, nodeType, nodeValue und childNodes.length bestimmt und in der String-Variablen t gespeichert. t wird in einem Alarmfenster angezeigt.

• Anschließend werden in einer Schleife alle vorhandenen childNodes analysiert: Die Funktion get_node_info$ ruft sich rekursiv selbst mit jedem childNode auf.
function get_node_info(nid) {
var n=document.getElementById(nid);
get_node_info$$(n);
}
function get_node_info$(n) {
var t="\nnodeName = "+n.nodeName;
t+="\nnodeType = "+n.nodeType;
t+="\nnodeValue = "+n.nodeValue;
var nc=n.childNodes.length;
t+="\nchildNodes.length = "+nc;
alert(t);
for(var i=0;i<nc;i++) {
get_node_info$(n.childNodes[i]);
}
}
Live-Live Javascript-Test von get_node_info("t6")
Ergebnis: Das Alarmfenster wird insgesamt 4x angezeigt:
Der div-Knoten hat 3 childNodes (#text, span, #Text), der span-Knoten hat selbst 1 childNode (#text)
Diese Informationen können sie entnehmen:
► nodeName: der Name des tags (ohne <>) oder #text, wenn es sich um einen Textknoten ("Inhalt") handelt.
► nodeType: 1=element <tag>, 2=attribute, 3=#text, 9=document
► nodeValue: bei tags null, bei Textknoten der enthaltenen Text.

DOM-Knoten löschen
• Um einen Knoten zu löschen, muss man sein übergeordnetes parent-Element adressieren.
• Von dort ausgehend kann man jedes einzelne seiner childNodes mit Methode removeChild löschen.
• Die Methode erhält als Argument jenes einzelne Element des Arrays childNodes, welches gelöscht werden soll. Da verschiedene Browser und Versionen eine Webseite teilweise unterschiedlich aufbauen, ist es riskant, ein childNodes-Element mit seinem ganzzahligen Index zu adressieren. Verwenden sie besser die Methoden firstChild oder lastChild 		Funktion zum Löschen aller childNodes eines adressierten Knoten-Elements:
function list_delete(nid) {
var n=document.getElementById(nid);
while(n.childNodes.length>0) {
n.removeChild(n.firstChild);
}
}
Wegen des teilweise unterschiedlichen Aufbaus von Webseiten ist es ratsam, immer alle childNodes eines Elements zu löschen - und bei Bedarf neu aufzubauen. Das ist schneller und sicherer als Löschen und/oder Austausch einzelner nicht direkt adressierbarer Elemente. HTML
<div id="test">...</div>
Javascript-Anwendung:
childnodes_delete("test");

DOM-Knoten erzeugen und "einhängen"
Javascript bietet die Möglichkeit, neue DOM-Elemente zu erzeugen und an der gewünschten Stelle in den bestehenden Objekt-Baum eines Dokuments "einzuhängen".
• Zur Erzeugung wird Methode createElement verwendet. Das Attribut (hier span ) bestimmt die Art des erzeugten Elements.
• Das neue Element wird erst dann wirksam (auf der Webseite sichtbar), wenn es mit Methode appendChild an ein existierendes Element (hier np ) angehängt wird. 		HTML:
<div id="test"></div>
Erzeugung eines neuen <span>-Elements und Anhängen des neuen Elements an ein existierendes adressiertes Element:
var np=document.getElementById("test");
var nspan=document.createElement("span");
np.appendChild(nspan);
HTML-(Äquivalent) nachher:
<div id="test"><span></span></div>

Text-Knoten

• Zur Erzeugung von #text-Knoten wird die Methode createTextNode verwendet. Sie erhält als Argument die Text-Daten des Elements.
• Im Beispiel rechts wird zuerst ein neues <span>-Element nspan erzeugt.
• Danach wird ein Text-Knoten nt erzeugt.
• Der neue Text-Knoten wird an das <span>-Element angehängt.
• Zuletzt wird das <span>-Element nspan zusammen mit all seinen childNodes ( = dem Text-Knoten nt ) an das existierende Element id="test" angehängt. 		Erzeugung eines <span>-Elements mit Text:
var np=document.getElementById("test");
var nspan=document.createElement("span");
var nt=document.createTextNode("abc");
nspan.appendChild(nt);
np.appendChild(nspan);
HTML-(Äquivalent) nachher:
<div id="test">
<span>abc</span>
</div>
Auf diese Weise lassen sich fast beliebig komplexe Strukturen von Knoten, childNodes, usw. erzeugen. Eine <table>-Tabelle beispielsweise kann mehrere 100 Sub-Elemente enthalten. Ein besonderer Vorteil aller DOM-Methoden ist die Möglichkeit, sie auf alle Mitglieder der XML-Familie anzuwenden - nicht nur auf HTML sondern auch auf XHTML, SVG-Objektgrafik usw.

Zum Inhaltsverzeichnis Homepage von PS-Trainer   >   Entwicklung   >   Javascript   >   JS & DOM