Beispiele für DOM -Scripting

Einfügen von Elementen

Das folgende Skript fügt Elemente zunächst in ein Fragment ein. Dann wird das Fragment in das Dokument eingefügt. Dies ist wahrscheinlich schneller, als wenn jedes Element einzeln in das Dokument eingefügt werden würde, da es dann passieren könnte, daß der Browser die Anzeige nach jedem Einfügevorgang aktualisieren will.

Wenn ein Fragment mehrere Elemente enthält, dann wird beim Einfüge des Fragments in das Dokument kein Fragement-Element eingefügt, sondern die Elemente des Fragments werden alle einzeln hintereinander in das Dokument eingefügt.

Das Klonen mit »cloneNode« soll schneller sein als das Anlegen mit »createElement«.

Die DOM -Funktionen sind fettgedruckt.

»getElementbyID« sucht in dem Element, in dem es enthalten ist, nach einem Element mit der als Argument angegebenen Kennung.

»createElement« erzeugt ein neues Element mit dem als Argument angegebenem Typ zur Verwendung in dem Dokument, in dem diese Methode (Funktion) enthalten ist.

»createDocumentFragment« erzeugt ein neues Fragment zur Verwendung in dem Dokument, in dem diese Methode (Funktion) enthalten ist.

»cloneNode« erzeugt eine Kopie des Elements, in dem diese Methode (Funktion) enthalten ist.

»textContent« ergibt den in einem Element enthaltenen Text. An diese Eigenschaft sind auch Zuweisungen möglich, um jenen Text festzulegen.

»appendChild« fügt das als Argument angegebene Element an das Ende des Inhaltes des Elements ein, in dem die aufgerufene Methode (Funktion) enthalten ist.

Main.html

<!DOCTYPE htcl><html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head><meta charset="UTF-8" /><title>Main</title><style type="text/css">
</style></head><body>
<ul id="ul"></ul>
<pre><code><script>/*<![CDATA[*/
{ const ul  = document.getElementById( 'ul' )
  const lit = document.createElement( 'li' )
  const fragment = document.createDocumentFragment()
  const append = name =>
  { const li = lit.cloneNode()
    li.textContent = name
    fragment.appendChild( li ) }
  append( 'Firefox' )
  append( 'Chrome'  )
  append( 'Edge'    )
  ul.appendChild( fragment ) }
/*]]>*/</script></code></pre></body></html>

Script-Ausschnitt

{ const form = document.createElement( "form" );
  form.setAttribute( "method", "post" );
  form.setAttribute( "action", "http://www.example.com.invalid/" );
  const field = document.createElement( "input" );
  field.setAttribute( "type", "hidden" );
  field.setAttribute( "name", "data" );
  field.setAttribute( "value", "Anton Berta Dora" );
  form.appendChild( field );
  document.body.appendChild( form );
  form.submit(); }

Übungsaufgaben

/ Übungsaufgabe

Überarbeiten Sie das Skript zu Übungszwecken so, daß die neuen li-Elemente nicht mit »cloneNode«, sondern mit »createElement« erzeugt werden.

/ Übungsaufgabe

Überarbeiten Sie das Skript zu Übungszwecken so, daß die neuen li-Elemente nicht erst in ein Fragment, sondern gleich direkt in das ul-Element des Dokuments eingefügt werden.