Stil mit {stil}

Sep 2008

Javascript :: Knoten erzeugen (Fabrikmethoden des DOM)

Das Document-Objekt stellt das gesamte XML/HTML-Dokument dar und ist der oberste Knoten des DOM-Baums. Da außerhalb des Document-Objekts keine Knoten existieren können, enthält das Document-Objekt die Methoden zur Erzeugung neuer Knoten (die im objektorientierten Jargon auch als »Fabrikmethoden« bezeichnet werden).

Knoten werden sozusagen im knotenfreien Raum ohne jegliche Verbindung zum Dokument erzeugt und erst durch Methoden des Node-Objekts in den Baum eingehangen.

createElement(tagName)	createDocumentFragment()
createTextNode(data)	createComment(data)
createCDATASection(data)	createProcessingInstruction(target, data)
createAttribute(name)	createEntityReference(name)
createElementNS(namespaceURI, qualifiedName)	createAttributeNS(namespaceURI, qualifiedName)

Document.createElement(tagName)

erzeugt einen neuen Elementknoten node vom Typ tagName.

var newP = document.createElement('p');

Der Typ des Elementknotens wie p, img, form, … wird mit Javascript als String in Kleinbuchstaben übergeben. Der neu erzeugte Knoten wird erst durch eine Knotenmethode wie insertBefore() oder appendChild() tatsächlich in das Dokument eingefügt.

Document.createTextNode(data)

erzeugt einen Textknoten. Der Parameter data ist der String für den Inhalt des Textknotens.

var newTextNode = document.createTextNode('Ein bisschen Text muss sein');

Document.createDocumentFragment()

erzeugt ein DocumentFragment. Die Methode hat keinen Parameter.

Ein DocumentFragment stellt einen Teilbaum dar, der in das Dokument eingefügt werden kann. Das Fragment muss kein wohlgeformtes XML bzw. HTML enthalten – ein Fragment kann aus einem einfachen einsamen Textknoten bestehen –, stellt aber alle Eigenschaften und Methoden des Node-Objekts zur Verfügung.

Dahinter steckt, dass jeder Einbau eines dynamisch mit Javascript erzeugten Objekts den Browser zu einem neuen Arrangement der Seite zwingen kann. Darum ist es effizienter, neu erzeugte Elemente zuerst in einem Fragment zusammenzubauen, um das Fragment als Ganzes in das Dokument einzubinden. Auf diese Weise erzeugt das Script nur einen einzigen Neuaufbau der Seite.

Fragment erzeugen Einzelne Elemente einfügen

Das Array enthält die URLs von Bildern, die in das Dokument eingefügt werden sollen. Sie werden zunächst in einem DocumentFragment untergebracht, das durch die Anweisung var fragment = document.createDocumentFragment(); erzeugt wird. Jedes IMG-Element wird im Block der for-Anweisung erzeugt und mit appendChild(newNode) in das Fragment gehangen.

Am Ende setzt target.appendChild(fragment) das Fragment in den Baum ein. Das DocumentFragment löst sich dabei auf und taucht selber nicht im Dokument auf.

function createFragment()
{
   var elems = new Array('ei01.jpg', …, 'ei06.jpg');
   var fragment = document.createDocumentFragment();
   for (var i=0; i<elems.length; i++) {
      var newNode = document.createElement('img');
      newNode.setAttribute('src', elems[i]);
      …
      fragment.appendChild(newNode);
   }
   var target = document.getElementById('jsdomK1');
   target.appendChild(fragment);
   return false;  
}

Document.createComment(data)

erzeugt einen Kommentar

Im Grunde genommen läuft das Erzeugen eines neuen Kommentars nicht anders als das Erzeugen eines Textknotens. Nur der Nachweis, dass der Kommentar tatsächlich erzeugt und eingefügt wurde, bleibt den DOM-Inspektoren vorbehalten, denn der Kommentar ist auch im Quelltext der HTML-Datei nicht sichtbar.

Kommentar erzeugen

function createComment()
{
   var newComment = document.createComment('© 2008 U. Häßler');
   var target = document.getElementById('jsDOMKnotenF3');
   target.parentNode.insertBefore(newComment, target.nextSibling);
}

In den Webinformationen unter dem Develop-Menü von Safari 3 wird der eingefügte Kommentar auch tatsächlich angezeigt.

Document.createCDATASection(data)

erzeugt einen CDATA-Bereich im Dokument mit dem Inhalt des Parameters data.

Die Methode ist XML-Dokumenten vorbehalten. In HTML-Dokumenten steht anstelle dessen die Methode createComment() zur Verfügung. In XHTML-Dokumenten darf eine CDATASection also nicht angezeigt werden.

CDATASection erzeugen

function createCDATA()
{
	var cdata = document.createCDATASection('© 2008 U. Häßler');
	var target = document.getElementById('jsDOMKnotenF11');
	target.parentNode.insertBefore(cdata, target.nextSibling);
}

Am Rande: Opera 8 und Safari 1.3 zeigen die CDATASection auch in einem HTML-Dokument an. FireFox zeigt in seiner Fehler-Konsole unter dem Menüpunkt Extras korrekt die Fehlermeldung

Uncaught exception [Exception… "Object cannot be created in this context" 
NS_ERROR_DOM_NOT_SUPPORTED_ERROR]. 

Auch Internet Explorer 6 zeigt eine Fehlermeldung:

Das Objekt unterstützt diese Eigenschaft oder Methode nicht.

Hier sind wir also sozusagen am dem des XHTML-Universiums. Wer tatsächlich einmal über den Rand sehen will, findet ein Beispiel in diesem XHTML-Dokument.

Document.createProcessingInstruction(target, data)

erzeugt eine Ausführungsanweisung Eine ProcessingInstruction besteht aus einem Ziel target und dem Inhalt data. target ist das erste Token nach dem Tag, data ist der Text ab dem ersten Non-Whitespace-Zeichen bis zum letzten Zeichen von dem schliessenden '?>', das die Direktive beendet.

<?xml version="1.0"?>

oder

<?php echo "hallo"; ?>

ProcessingInstruction erzeugen

Document.createAttribute(name)

erzeugt ein Attr-Objekt mit dem Namen name.

Anders als setAttribute() erzeugt createAttribut() ein Attribut ohne einen Wert. Der Wert muss später durch die Methode setAttribute() gesetzt werden. Ein Attribut, das mit createAttribute() erzeugt wurde, hat keinen parentNode, bis es durch setAttribute() in ein Element eingefügt wird.

<div id="newAtt"></div>

Att erzeugen

var attClass = document.createAttribute('class'); erzeugt ein neues Attribut class, die zweite Anweisung setzt den Wert des Attributknotens auf die CSS-Klasse att. Auf dieselbe Weise wird ein Attribut title erzeugt und mit einem Wert belegt. Am Ende fügt die Methode setAttributeNode() die beiden neuen Attributknoten in den Elementknoten mit der id newAtt ein.

function createAttribute()
{
   var attClass = document.createAttribute('class');
   attClass.nodeValue = 'att';
   
   var attTitle = document.createAttribute('title');
   attTitle.nodeValue = 'Kleiner Hinweis';
   
   var target = document.getElementById('newAtt');
   target.setAttributeNode(attTitle);
   target.setAttributeNode(attClass);
   return false;
}