CSS, HTML und Javascript mit {stil}

cloneNode

clone node: effizient

cloneNode ist eine ausgesprochen effektive Technik, um ganze Strukturen in den DOM-Baum einzufügen – viel schneller als das Anlegen von Elementen mit createElement().

Geklonte Knoten sind im Quellcode des Dokuments nicht sichtbar und bleiben den Suchmaschinen verborgen. Sie wurden lediglich als Knoten in den DOM-Baum des Browsers eingefügt, nicht aber als Markup und Text in den Quelltext geschrieben.

HTML5 bringt ein template-Tag, das ganze Blöcke unsichtbar auf Vorrat für das Scripting bereit hält. Das template-Tag liefert die Vorlage für Blöcke, die cloneNode einfach und effektiv in das HTML-Dokument einhängen kann. IE unterstützt das template-Tag ab EDGE 14.

cloneNode()

Javascript node.cloneNode(deep)

cloneNode erzeugt eine Kopie eines Knotens im DOM-Baum mitsamt seinen childNodes um die Struktur des Dokuments zu ändern. Die Kopie kann an einer anderen Stelle in den DOM-Baum gehangen werden.

Der Parameter deep ist ein Boolean und gibt an, ob der Knoten mit all seinen Elementen geklont werden soll (deep = true) – Event Listener werden allerdings auch mit deep = true nicht mitgeliefert.

VaterknotenparentNode
Array aller KindknotenchildNodes
Das erste bzw. letzte Kind eines KnotensfirstChild / lastChild
vorangegangener Knoten bzw. nächster KnotenpreviousSibling / nextSibling

Die Bedingung der if-Abfrage if (document.getElementById('dolly')) prüft, ob ein Element mit id="dolly" existiert. Die Abfrage verhindert, das ein Javascript-Fehler entsteht, wenn die Struktur des HTML-Elements eines Tages geändert werden sollte. Wenn dolly existiert, wird die Tabelle mit var newNode = table.cloneNode(true) geklont. Der geklonte Knoten existiert zunächst nur im Speicher.

<table id="dolly">
…
var button = document.getElementById('copyDolly');
button.onclick = function () {
    if (document.getElementById('dolly')) {
        var table = document.getElementById('dolly');
        var newNode = table.cloneNode(true);
        newNode.setAttribute('id','newTable');
        button.parentNode.insertBefore(newNode, button);
        button.parentNode.removeChild(button);
    } 
    return false; 
}

Erst wenn der Knoten mit button.parentNode.insertBefore(newNode, button) in das DOM eingefügt wird, zeigt der Browser die Kopie der Tabelle. Am Ende entfernt button.parentNode.removeChild(button) den Button, damit die Tabelle nicht noch ein weiteres Mal eingefügt werden kann.

cloneNode ist schnell und perfekt geeignet, um große Bereich des DOMs zu kopieren. Hinterher kann das Original mit removeChild gelöscht werden.

cloneNode und EventListener

cloneNode() kopiert keine Event Listener. Keine Technik des DOM übernimmt Event Listener, die einzigen Optionen sind:

  • Den Event Listener manuell auf den geklonten Knoten setzen.
  • Event-Delegation: Den Event Listener auf einen Node setzen, der sowohl das Original als auch die Kopie enthält.
  • Ein Wrapper für Node.addEventListener – so macht es clone() in jQuery, wo man einen Node mitsamt Event Listener kopieren kann (.clone( [withDataAndEvents ] )).

normalize()

Manipulationen des HTML-Dokuments durch Javascript-Funktionen wie splitText ändern den DOM-Baum. Wenn der Baum wieder so aussehen soll wie beim Laden der Webseite, ist eine Normalisierung angebracht.

Javascript node.normalize() normalisiert alle Textknoten des Unterbaums von node und verbindet zwei oder mehr aufeinander folgende Textknoten in einen einzigen Knoten.

Was Javascript normalize() nicht macht: normalize entfernt keinen überflüssigen Weißraum zwischen Textknoten. Weißraum ist nicht leer, sondern enthält Leerzeichen oder Blanks.

Als es klingelte, nachts, es war kurz vor halb zehn wurde niemand erwartet und niemand gesehen.
Quelltext