DOM-getter und array-iteratoren - scripte schneller entwickeln

[peterS.]

gruss Interessierte,

ich habe mal die ueber die letzten 5 Jahre bei mir aufgelaufenen
loesungen zu den im forum am haeufigsten nachgefragten aber eben
(noch) nicht von den w3c-spezifikationen beruecksichtigten *wunsch-
DOM-getter*n auf vordermann gebracht und zu grossen teilen auf die
von mir hochgeschaetzten array iteratoren/accessoren draufgesetzt.

herausgekommen ist moeglicherweise sogar eine minimale bibliothek
zur geradlinigen und schnellen DOM-programmierung, die sich unter
den gesichtspunkten "syntax" und "namensraum" nahtlos sowohl in die
JavaScript-api als auch die DOM-api einfuegt.

es handelt sich nicht um ein DHTML-framework, welches versucht, alle
moeglichen browserinkompatibilitaeten zur kapseln und vor dem anwender
zu verstecken. die einzelloesungen setzen viel tiefer an, und zumindest
fuer mich verbessert die gesamtheit aller module die abstraktion und
erleichtert und beschleunigt, auch wiederum nur fuer mich gesprochen,
die entwicklung von DOM-scripten auf einer immer noch basalen ebene,
auf der ich alles unter kontrolle zu haben meine ;-)

natuerlich habe ich beim entwickeln auch getestet, und meine testcases
laufen ohne fehler durch - was ich schon aus zeitgruenden alleine aber
nicht leisten kann, ist das fahren des ultimativen haertetests.

und darum geb ich das ding mal frei - zur benutzung und fehlerrueckmeldung.

was kann das teil? - nun:

• [document.getElementsByClassNames]:

- der klassiker schlechthin, erfunden von Thomas Meinike.

- verdaut regulaere ausdruecke bzw. strings in form *white space*-
    und/oder komma-separierter css-klassen-namen, was im falle der
    *white space*-separation die suche nach kombinierten klassennamen,
    im falle der komma-separation die suche nach mehr als nur einem
    (kombinierten) klassennamen und beim mix natuerlich die kombination
    beider suchen ermoeglicht.

- darueber hinaus gibt es noch die ebenfalls statischen methoden:

- [Node.getElementsByClassNames] wo der filter ueber alle
      unterelemente eines [HTMLElement]- bzw. eines [Node]-
      objekts laeuft.
    - [NodeList.getElementsByClassNames] wo der filter ueber alle
      eintraege einer wie auch immer gearteten listenstruktur -
      [HTMLCollection]s, [NodeList]s, [Array]s - laeuft.

• [document.getElementsByAttributeAndValue]:

- vielfach gewuenscht:

- akzeptiert fuer den zu suchenden attribut-namen nur strings,
    erwartet fuer den attribut-wert regulaere ausdruecken und
    strings; die werte [undefined] und [null], sowie die string-werte
    "*" und "" fuer den letztgenannten parameter setzen die suche in
    einen *wildcard*-modus, so dass nach allen attribut-namen gesucht
    wird, deren wert weder [undefined] noch ein leerstring ist.

- darueber hinaus gibt es noch die ebenfalls statischen methoden:

- [Node.getElementsByAttributeAndValue] wo der filter ueber alle
      unterelemente eines [HTMLElement]- bzw. eines [Node]-
      objekts laeuft.
    - [NodeList.getElementsByAttributeAndValue] wo der filter ueber
      alle eintraege einer wie auch immer gearteten listenstruktur -
      [HTMLCollection]s, [NodeList]s, [Array]s - laeuft.

• [document.getElementsByAttributeSelector]:

- von Cheatah in die runde geworfen:

- versucht sich in der interpretation eines css 3 element- und/oder
    attribut-selectors, der folgendem schema genuegen muss:
    http://www.w3.org/TR/2001/CR-css3-selectors-20011113/#selectors

- darueber hinaus gibt es noch die ebenfalls statischen methoden:

- [Node.getElementsByAttributeSelector] wo der filter ueber alle
      unterelemente eines [HTMLElement]- bzw. eines [Node]-
      objekts laeuft.
    - [NodeList.getElementsByAttributeSelector] wo der filter ueber
      alle eintraege einer wie auch immer gearteten listenstruktur -
      [HTMLCollection]s, [NodeList]s, [Array]s - laeuft.

desweiteren:

• [document.getCurrentStyle] - wird im forum in grossen abstaenden aber
                                 doch regelmaessig nachgefragt.
• [document.getCompatMode]
• [document.isInQuirksMode]
• [document.getCharset]

grundlage fuer das funktionieren der ausfuehlich beschriebenen DOM-
  getter sind browseruebergreifend implementierte array-iteratoren bzw.
  -accessoren, wie sie von mozilla.org mit JavaScript 1.6 eingefuehrt
  wurden und somit nur browsern zur verfuegung stehen, deren gecko-
  engine nicht *juenger* als version 1.8 sein darf.

fuer alle browser stehen folgende methoden sowohl prototypisch als
  auch statisch zur verfuegung:

• [Array.indexOf]
• [Array.lastIndexOf]
• [Array.contains]
• [Array.forEach]
• [Array.every]
• [Array.some]
• [Array.map]
• [Array.filter]

der release steht unter folgender adresse bereit:

• http://www.pseliger.de/jsExtendedApi/jsApi.bundles.DOM.getters.js

die quelldaten des gerade geschnuerten und verlinkten pakets sind zwar
in dessen quellcode aufgefuehrt, sollen aber, falls doch ein breiteres
interesse an verwendung und nutzung besteht, hier noch einmal explizit
genannt werden:

• http://www.pseliger.de/jsExtendedApi/jsApi.Array.mozExtensions.dev.js

• http://www.pseliger.de/jsExtendedApi/jsApi.Array.mozGenerics.dev.js

• http://www.pseliger.de/jsExtendedApi/jsApi.document.getElementsByClassNames.dev.js

• http://www.pseliger.de/jsExtendedApi/jsApi.document.getElementsByAttributeAndValue.dev.js

• http://www.pseliger.de/jsExtendedApi/jsApi.document.getElementsByAttributeSelector.dev.js

• http://www.pseliger.de/jsExtendedApi/jsApi.document.getCurrentStyle.dev.js

• http://www.pseliger.de/jsExtendedApi/jsApi.document.getCompatMode.dev.js

fuer unerschrockene verlinke ich auch gleich nochmal meine drei testcases -
ABER VORSICHT - ich debugge mit ein und auskommentierten ALERTs und im moment
sind alle testfaelle pro seite (so zwischen 30 und 120 alerts pro seite) aktiviert:

• http://www.pseliger.de/jsExtendedApi/jsApi.document.getElementsByClassNames.dev.html - 36 alerts.
• http://www.pseliger.de/jsExtendedApi/jsApi.document.getElementsByAttributeAndValue.dev.html - 29 alerts.
• http://www.pseliger.de/jsExtendedApi/jsApi.document.getElementsByAttributeSelector.dev.html - >120? alerts.

auf kommentare und rueckmeldungen wartend - so long - peterS. - [e-mail]

[Cybaer]

Hi,

- akzeptiert fuer den zu suchenden attribut-namen nur strings,
    erwartet fuer den attribut-wert regulaere ausdruecken und
    strings; die werte [undefined] und [null], sowie die string-werte
    "*" und "" fuer den letztgenannten parameter setzen die suche in
    einen *wildcard*-modus, so dass nach allen attribut-namen gesucht
    wird, deren wert weder [undefined] noch ein leerstring ist.

Geil, das stand schon lange auf meiner "Will ich bei Gelegenheit mal tun"-Liste! :-)

grundlage fuer das funktionieren der ausfuehlich beschriebenen DOM-
  getter sind browseruebergreifend implementierte array-iteratoren bzw.
  -accessoren, wie sie von mozilla.org mit JavaScript 1.6 eingefuehrt
  wurden und somit nur browsern zur verfuegung stehen, deren gecko-
  engine nicht *juenger* als version 1.8 sein darf.

Ungeil - da muß ich bei Gelegenheit wohl doch noch selbst ran ... =;-o

Gruß, Cybaer

[peterS.]

hallo Cybear

grundlage fuer das funktionieren der ausfuehlich beschriebenen DOM-
  getter sind browseruebergreifend implementierte array-iteratoren bzw.
  -accessoren, wie sie von mozilla.org mit JavaScript 1.6 eingefuehrt
  wurden und somit nur browsern zur verfuegung stehen, deren gecko-
  engine nicht *juenger* als version 1.8 sein darf.

Ungeil - da muß ich bei Gelegenheit wohl doch noch selbst ran ... =;-o

nein, musst Du nicht. die verlinkte bibliothek, bzw. deren teilmodule
   stellen allen von mir getesteten browsern (msie, mozilla, opera) diese
   array methoden zur verfuegung.

@ alle - zur info:
   mittlerweile konnte ich die drei verlinkten testcases auch auf einen
   safari loslassen - das ergebnis war niederschmetternd ... auf den
   ersten blick scheint es dort probleme mit den statischen array methoden
   zu geben ... da muss ich also nochmal dranrumschrauben, bevor das modul
   wirklich fuer allgemein praxistauglich erklaert werden kann :(

so long - peterS. - [e-mail]

[peterS.]

hallo again Interessierte,

@ alle - zur info:
   mittlerweile konnte ich die drei verlinkten testcases auch auf einen
   safari loslassen - das ergebnis war niederschmetternd ... auf den
   ersten blick scheint es dort probleme mit den statischen array methoden
   zu geben ... da muss ich also nochmal dranrumschrauben, bevor das modul
   wirklich fuer allgemein praxistauglich erklaert werden kann :(

sieg - *es tut jetzt* auch in einem mir zur verfuegung stehenden safari 1.3.2!

das debuggen im safari ist echt eine qual, weil zeitraubend - und dann lagen
   die fehler noch nicht einmal bei mir, sondern bei den lieben safari- und/oder
   khtml-engine-programmierern:

so unterstuetzt mein testbrowser z.b. nicht die native JavaScript-core-methode
   [RegExp.compile]  -  dem sprachkonzept sei dank, kann man diese methode ohne
   grossen umstaende nachruesten:

~~~javascript if ((typeof RegExp.prototype.compile != "function") && (typeof RegExp.prototype.compile != "object")) {

RegExp.prototype.compile = function () {

return this.constructor.apply(this, arguments);
       };
     }

  
   desweiteren tut mein test-safari zuersteinmal so, als implementierte er \*echte\*  
   [NodeList] objekte - `javascript:alert(document.getElementsByTagName("body"));`{:.language-javascript}  
   ergibt zum bsp: [object NodeList] - doch wenn er mit  `(obj instanceof NodeList)`{:.language-javascript}  
   farbe bekennen soll, kneift er ... ,und ausserdem implementieren safari-eigene  
   [NodeList] objekte zwar die methode [item], die methode [namedItem] jedoch  
   nicht.  
  
   die quellcodes aller im ausgangsposting verlinkten dateien beruecksichtigen  
   jetzt diese eigenarten; die tests laufen, wie oben gerade erwaehnt, im mir  
   zur verfuegung stehenden safari auch anstandlos durch.  
  
  
   ich freue mich auch weiterhin auf feedback - so long - peterS. - [e-mail]  
  
  

-- 
»Because objects in JavaScript are so flexible, you will want to think differently about class hierarchies.  
Deep hierarchies are inappropriate. Shallow hierarchies are efficient and expressive.« - [Douglas Crockford](http://javascript.crockford.com/)  
  
ie:( fl:) br:> va:( ls:& fo:) rl:| n3;} n4:} ss:} de:µ js:} mo:? zu:]

[Cybaer]

Hi,

das debuggen im safari ist echt eine qual, weil zeitraubend - und dann lagen
   die fehler noch nicht einmal bei mir, sondern bei den lieben safari- und/oder
   khtml-engine-programmierern:

Ich fühle mit dir! Ich durfte mich mit deren JS-Marotten auch schon rumschlagen ... :-/

die quellcodes aller im ausgangsposting verlinkten dateien beruecksichtigen
   jetzt diese eigenarten;

Supi. :-))

Aber einen HTML-URL zum Verlinken gibt es noch nicht, oder?

Gruß, Cybaer

[peterS.]

hallo again Cybaer,

Supi. :-))

Aber einen HTML-URL zum Verlinken gibt es noch nicht, oder?

aehmm ... naja ... da sind doch drei ?-)

oder meinst Du, ich muesste das mal so richtig schoen dokumentieren ...

... schwierig, meinereinige webpraesenz ist seit nunmehr 10 jahren
   eine ungeordnete ansammlung sich gegenseitig nicht referenzierender
   einzeldokumente, wobei der sichtbare teil hinter dem offiziellen
   eingang nur so tut, als waere dies anders.

kurz und gut, ich habe fuer soetwas immer gerade keine zeit.

aber es gibt ja noch das minimale *liesmich* zum verlinken:

http://www.pseliger.de/jsExtendedApi/jsApi.bundles.DOM.getters.de-liesmich.txt

so long - peterS. - [e-mail]

[Cybaer]

Hi,

aehmm ... naja ... da sind doch drei ?-)

ROTFLBTCSTC!

oder meinst Du, ich muesste das mal so richtig schoen dokumentieren ...

(pfeif)

Ach ne, wer sich für sowas interessiert, der wird/sollte damit ohnehin klarkommen.

... schwierig, meinereinige webpraesenz ist seit nunmehr 10 jahren
   eine ungeordnete ansammlung sich gegenseitig nicht referenzierender
   einzeldokumente, wobei der sichtbare teil hinter dem offiziellen
   eingang nur so tut, als waere dies anders.

(prust)

kurz und gut, ich habe fuer soetwas immer gerade keine zeit.

Schon klar. :-))

aber es gibt ja noch das minimale *liesmich* zum verlinken:
   http://www.pseliger.de/jsExtendedApi/jsApi.bundles.DOM.getters.de-liesmich.txt

LOL - das hatte ich schon dabeigepackt. ;)

Ne, ich dachte eher so etwas "htmliges" ;-) - worauf man verlinken kann, um es weiterzuempfehlen.

Und sei es das Liesmich als HTML-Datei ...

... das ist so das unterste, was ich immer so mache.

(Na ja, das unterste ist die blanker Source-Datei, die von 'nem PHP-Script mit highlight() rausgedrückt wird >;-> - und da es mehrere Dateien sind vielleicht mit der Liesmich-Seite vorgeschaltet, wo die Links aufgelistet und klickbar sind? :))

Aber ich sehe schon, Du willst gar nicht reich & berühmt werden ... ;)

Gruß, Cybaer

PS: Soll ich eine für dich machen? Wäre eine gute Gelegenheit, mich mal endlich in Dreamweaver einzuarbeiten! >>;->

[peterS.]

hallo Cybaer,

Ach ne, wer sich für sowas interessiert, der wird/sollte
damit ohnehin klarkommen.

fuer's erste, ja. ich bin durchaus dieser auffassung.

Ne, ich dachte eher so etwas "htmliges" ;-) - worauf man
verlinken kann, um es weiterzuempfehlen.

bevor ich mit dem aufhuebschen anfange, haette ich gerne noch mehr
   erfahrungsruecklauf, was den komfort/aerger etc. beim einsatz des
   verlinkten script-pakets betrifft.

PS: Soll ich eine für dich machen? Wäre eine gute Gelegenheit,
mich mal endlich in Dreamweaver einzuarbeiten! >>;->

... ach, noe ... las mal :-)

aber danke fuer das angebot (und das ist ernst gemeint).

so long - peterS. - [e-mail]

[Cybaer]

Hi,

bevor ich mit dem aufhuebschen anfange, haette ich gerne noch mehr
   erfahrungsruecklauf, was den komfort/aerger etc. beim einsatz des
   verlinkten script-pakets betrifft.

Spontan: Fein. :-)

Aber im Detail werde ich erst nächste Woche dazu kommen ...

Gruß, Cybaer

[peterS.]

gruss Cybaer,

bevor ich mit dem aufhuebschen anfange, haette ich gerne noch mehr
   erfahrungsruecklauf, was den komfort/aerger etc. beim einsatz des
   verlinkten script-pakets betrifft.

...
Aber im Detail werde ich erst nächste Woche dazu kommen ...

schoen. und fuer den fall, dass Du was zu verkuenden hast, plaediere ich
   dafuer, diesem thread im forum eine *wiedereroeffnung* angedeihen zu lassen.

so long - peterS. - [e-mail]

[Christian Seiler]

Hallo Peter,

Ich habe im Moment leider keine Zeit, mir das genauer anzusehen, aber es hört sich VERDAMMT interessant an und ist eigentlich das, was ich schon immer so gebraucht habe, wenn ich JS entwickelt habe. ;-)

Ich habe mir den Thread mal als Lesezeichen vermerkt und werde ihn mir für's nächste Mal, bei dem ich wieder etwas JavaScript-mäßiges am Basteln bin aufheben.

Von mir aus jedenfalls ein Danke für Deine Arbeit!

Viele Grüße,
Christian

[peterS.]

gruss Christian,

Ich habe im Moment leider keine Zeit, ...
...
Ich habe mir den Thread mal als Lesezeichen vermerkt und werde ihn mir für's
nächste Mal, bei dem ich wieder etwas JavaScript-mäßiges am Basteln bin aufheben.

Von mir aus jedenfalls ein Danke für Deine Arbeit!

jo - und vergiss nicht, kritik jeder art zu Deinen gemachten erfahrungen hier
   wieder abzuladen. es gilt, wie ich schon Cybaer schrieb:

»... fuer den fall, dass Du was zu verkuenden hast, plaediere ich dafuer, diesem
   thread im forum eine *wiedereroeffnung* angedeihen zu lassen.«

so long - peterS. - [e-mail]