nicht angemeldet
DOM-getter und array-iteratoren - scripte schneller entwickeln
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]:
- 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:
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. - pseliger@gmx.net
--
»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
ie:( fl:) br:> va:( ls:& fo:) rl:| n3;} n4:} ss:} de:µ js:} mo:? zu:]
»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
ie:( fl:) br:> va:( ls:& fo:) rl:| n3;} n4:} ss:} de:µ js:} mo:? zu:]
-
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
--
Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!-
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. - pseliger@gmx.net
--
»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
ie:( fl:) br:> va:( ls:& fo:) rl:| n3;} n4:} ss:} de:µ js:} mo:? zu:]-
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. - pseliger@gmx.net -- »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:]-
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
--
Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!-
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. - pseliger@gmx.net
--
»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
ie:( fl:) br:> va:( ls:& fo:) rl:| n3;} n4:} ss:} de:µ js:} mo:? zu:]-
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.txtLOL - 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! >>;->
--
Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!-
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. - pseliger@gmx.net
--
»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
ie:( fl:) br:> va:( ls:& fo:) rl:| n3;} n4:} ss:} de:µ js:} mo:? zu:]-
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
--
Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!-
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. - pseliger@gmx.net
--
»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
ie:( fl:) br:> va:( ls:& fo:) rl:| n3;} n4:} ss:} de:µ js:} mo:? zu:]
-
-
-
-
-
-
-
-
-
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-
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. - pseliger@gmx.net
--
»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
ie:( fl:) br:> va:( ls:& fo:) rl:| n3;} n4:} ss:} de:µ js:} mo:? zu:]
-