dhtml-code aufhuebschen (performance)

[peterS.]

gruss Andreas,

vielen JavaScript-programmierern gelingt dies hingegen muehelos ueber
DOM mit unreferenzierten "document.getElementById"-orgien.

könntes Du das bitte noch erläutern? Was meint "unreferenziert"? Ich schreibe
gerade ein umfangreicheres JS-Programm und muß da jede Menge Objekte -
auch über 'document.getElementById' angesprochen - geleichzeitig verändern.
Natürlich will ich das möglichst performant gestalten.

entschuldige bitte die schwammige formulierung - jetzt wo Du es sagst,
   faellt es mir auch auf. mit "unreferenziert" wollte ich mich in diesem fall
   um mehrere (neben)saetze druecken und eigentlich folgendes sagen:

es gibt immer noch genug leute, die fuer jede eigenschaft eines knotens,
   die sie innerhalb einer sequenz setzen wollen, jedesmal aufs neue mit
   "document.getElementById" auf dieses objekt losgehen, anstatt einmalig
   einer variablen die referenz auf den gewuenschten knoten zuzuweisen,
   um dann mit ebendieser variablen weiterzuarbeiten.

boese:
     document.getElementById("objId").style.backgroundColor = "#...";
     document.getElementById("objId").style.color = "#...";
     document.getElementById("objId").style.display = "block";
     document.getElementById("objId"). ... ;

wenn schon "document.getElementById", dann besser so:
     var nodeObj = document.getElementById("objId");
     nodeObj.style.backgroundColor = "#...";
     nodeObj.style.color = "#...";
     nodeObj.style.display = "block";
     nodeObj. ... ;

"document.getElementById" ist richtig teuer, denn diese methode hangelt
   sich jedes mal aufs neue durch den gesamten elemente-baum.
   ueberhaupt ist "document.getElementById" nur in sehr wenigen faellen die
   einzige moeglichkeit, um an einen knoten zu kommen.
   vorher sollte man ruhig die guten alten collections wie "doument.images",
   "document.forms" oder "document.links" bemuehen.
   den rest erschlaegt man eigentlich immer kostenguenstiger mit
   "document.getElementsByTagName([string tagname])[[string idOrName]]".

wenn man z.b. div-soup hat und mehrere eigenschaften einer groesseren
   anzahl dieser divs setzen moechte, sollte man sich sowohl einer referenz
   auf die "HTMLDivElement"-collection als auch einer referenz auf das jeweils
   mehrfach zu bearbeitende "HTMLDivElement" bedienen:

var divColl = document.getElementsByTagName("div"); // alle divs im dokument;
   var nodeObj = divColl["objIdOrName01"];
 //nodeObj.style. ... eigenschaft setzen;
 //nodeObj.style. ... eigenschaft setzen;
   nodeObj = divColl["objIdOrName02"];
 //nodeObj.style. ... eigenschaft setzen;
 //nodeObj.style. ... eigenschaft setzen;
 //usw.

an dieser stelle sei noch erwaehnt, dass die aus alten msie-tagen bekannte
   und viel genutzte "document.all"-collection auch mit den mitteln des w3c-DOM
   abgebildet werden kann - Thomas Meinike hat dies meines wissens nach das
   erstemal im dezember 2002 ins forum getragen, als er eine neue funktion
   vorstellte. das aequivalent lautet: 'document.getElementsByTagName("*")'.

by(t)e by(t)e - peterS. - [e-mail]