template

Index :: Javascript :: Widgets :: DOM-Hilfsfunktionen (dom.js)

Dieses Modul enthält häufig benötigte Funktionen zur Manipulation der Dokumentstruktur.
Zwecks kompaktem Code im Aufrufer sind die Funktionsnamen bewusst kurz gehalten.

NameBeschreibung
$() Liefert ein gesuchtes HTML-Element.
Parameter:
  • id (String) Id des Elements.
$A() Append - Hängt ein neues HTML-Element an einen Elternknoten und liefert es zurück.
Parameter:
  • p (Objekt) Eltern-Element.
    Falls null oder undefined wird document.body verwendet.
  • t (String oder Array) Typ des neuen Elements.
    • falls String: Es wird ein Textknoten erzeugt.
      TEXTKNOTEN = $A(PARENT, 'abc');
    • falls Array: Es wird ein bestimmtes HTML-Element erzeugt.
      Bei leerem Array wird ein DIV erzeugt:
      DIV = $A(PARENT, []);
      Ansonsten definiert Array[0] den Typ (Tagname) des Elements.
      Bei leerem String wird ein SPAN erzeugt,
      SPAN = $A(PARENT, ['']);
      ansonsten das gewünschte Element:
      ELEMENT = $A(PARENT, ['TAG']);
      Hierbei kann auch ein Klassenname angegeben werden:
      ELEMENT = $A(PARENT, ['TAG.CLASS']);
      In Array[1...N] können Attribute und/oder Kind-Elemente definiert werden.
      Attribute werden in Objektform notiert, z.B.:
      ELEMENT = $A(PARENT, ['TAG', {'ATTR1':'WERT1', 'ATTR2':'WERT2'}]);
      Für Kind-Elemente gilt die selbe Syntax wie oben.
      Kind-Textknoten:
      $A(PARENT, ['TAG', 'abc']);
      Kind-DIV:
      $A(PARENT, ['TAG', []]);
      Kind-Element:
      $A(PARENT, ['TAG', ['TAG']]);
      Die Tiefe der Verschachtelung sowie die Anzahl der Kind-Elemente ist beliebig.
      Hier wird z.B. eine 2x2-Tabelle (im BODY) erzeugt:
      $A(null, ['table', {'border':1, 'cellSpacing':1, 'cellPadding':2},
  ['tr', ['td', 'Mickey'], ['td', 'Mouse']],
  ['tr', ['td', 'Donald'], ['td', 'Duck']],
]);
  • [doc] (Objekt) optional: Basisdokument.
$C() Create - Erzeugt und liefert ein neues HTML-Element.
Parameter:
  • t (String) Typ (Tagname) des neuen Elements.
  • [doc] (Objekt) optional: Basisdokument.
$D() Delete - Löscht ein HTML-Element und liefert es zurück.
Parameter:
  • e (Objekt) HTML-Element.
$E() Empty - Löscht alle Kindknoten eines HTML-Elements und liefert es zurück.
Parameter:
  • e (Objekt) HTML-Element.
 
function $(id) { return document.getElementById(id); }

function $A(p,t,doc) {
  if (t==undefined) throw _err('$A: HTML-Element ist undefiniert');
  p=p||document.body; doc=doc||p.ownerDocument||document; var e;
  if (t.constructor==String) e=doc.createTextNode(t);
  else if (!t.length) e=$C('div',doc);
  else for (var i=0;i<t.length;i++) {
    if (t[i]==undefined) throw _err('$A: Undefiniertes Listenelement');
    if (t[i].constructor==String) { if (i) { $A(e,t[i],doc); continue; }
      var a=t[0].match(/^([a-z][a-z0-9]*)\.([^\s\.]+)$/i);
      if (a) (e=$C(a[1],doc)).className=a[2];
      else e=$C((a=t[0].match(/^([a-z][a-z0-9]*)$/i))?a[1]:'span',doc);
    } else if (t[i].constructor==Array) $A(e,t[i],doc);
    else if (t[i].constructor==Number) $A(e,t[i].toString(),doc);
    else if (t[i].constructor==Object) for (var k in t[i]) e.setAttribute(k,t[i][k]);
    else throw _err('$A: Element '+t[i]+' nicht als Argument verwendbar');
  } p.appendChild(e); return e;
  function _err(s) { alert(s); return new Error(s); }
}

function $C(t,doc) { return (doc||document).createElement(t); }

function $D(e) { return e.parentNode.removeChild(e); }

function $E(e) { var c; while(c=e.firstChild) e.removeChild(c); }

Index :: Javascript :: Widgets

template