SELFHTML Forum
SELFHTML Forumsarchiv
2007
Oktober
 |
SELFHTML Forumsarchiv |
 |
|
 |
|
Die folgende Nachricht zum Thema stammt von: Andreas, 30. 10. 2007, 15:50
Hallo,
gibt es eine Möglichkeit, wie ich mit javascript alle Elemente in einer kompletten HTML-Datei auswählen kann, die den selben Wert bei class="..." haben?
Vielen Dank
Andreas
Die folgende Nachricht zum Thema stammt von: Felix Riesterer, 30. 10. 2007, 16:01
Lieber Andreas,
»» wie ich mit javascript alle Elemente in einer kompletten HTML-Datei auswählen kann, die den selben Wert bei class="..." haben?
Du suchst nach einer Art "getElementsByClassName()". Diese Funktion müsstest Du Dir erst schreiben... oder Du suchst im Archiv danach.
Liebe Grüße aus Ellwangen,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
Die folgende Nachricht zum Thema stammt von: Gunnar Bittersmann, 30. 10. 2007, 16:12
Hello out there!
»» »» wie ich mit javascript alle Elemente in einer kompletten HTML-Datei auswählen kann, die den selben Wert bei class="..." haben?
Wozu sollte man das brauchen?
»» Du suchst nach einer Art "getElementsByClassName()". Diese Funktion müsstest Du Dir erst schreiben... oder Du suchst im Archiv danach.
Schon das aktuelle Forum hält einen Thread dazu bereit: http://forum.de.selfhtml.org/?t=161033&m=1047613
See ya up the road,
Gunnar
--
„Und [dieses Forum] soll […] auch ein Fachforum bleiben und kein Psychologieforum werden.“ (Kirsten Evers)
Die folgende Nachricht zum Thema stammt von: JürgenB, 30. 10. 2007, 17:03
Hallo Gunnar,
»» »» wie ich mit javascript alle Elemente in einer kompletten HTML-Datei auswählen kann, die den selben Wert bei class="..." haben?
»»
»» Wozu sollte man das brauchen?
es mag Fälle geben, da kann man auf getElementsByClassName verzichten. Aber eben nicht immer. Ich steuere z.B. über die Klassennamen den Einsatz von Javascripten im Sinne von: mache etwas mit allen Elementen der Klasse XYZ.
Siehe z.B. http://www.j-berkemeier.de/TableSort.html
Gruß, Jürgen
Die folgende Nachricht zum Thema stammt von: Gunnar Bittersmann, 30. 10. 2007, 17:09
Hello out there!
»» es mag Fälle geben, da kann man auf getElementsByClassName verzichten. Aber eben nicht immer.
Ja schon klar.
»» Ich steuere z.B. über die Klassennamen den Einsatz von Javascripten im Sinne von: mache etwas mit allen Elementen der Klasse XYZ.
Wenn es sich bei "mache etwas" um "ändere die Darstellung" handelt, kann man auf getElementsByClassName wohl aber immer verzichten.
See ya up the road,
Gunnar
--
„Und [dieses Forum] soll […] auch ein Fachforum bleiben und kein Psychologieforum werden.“ (Kirsten Evers)
Die folgende Nachricht zum Thema stammt von: Felix Riesterer, 30. 10. 2007, 17:45
Lieber Gunnar,
»» Wenn es sich bei "mache etwas" um "ändere die Darstellung" handelt, kann man auf getElementsByClassName wohl aber immer verzichten.
Ich muss widersprechen!
Liebe Grüße aus Ellwangen,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
Die folgende Nachricht zum Thema stammt von: Felix Riesterer, 30. 10. 2007, 17:51
Nachtrag
»» Du suchst nach einer Art "getElementsByClassName()"
ich habe Dir meine Funktion herausgesucht. Hier ist sie:getElementsByClassName : function (className, element) {
element = element ? element : document;
var muster = new RegExp("(^|\\s)" + className + "(\\s|$)");
var alles = element.getElementsByTagName("*");
var gefunden = new Array();
var i;
for (i = 0; i < alles.length; i++) {
if (alles[i] && alles[i].className && alles[i].className != "") {
if (alles[i].className.match(muster)) // für Fälle wie class="xyz abc"
gefunden[gefunden.length] = alles[i];
}
}
return gefunden;
}
Möge sie Dir von Nutzen sein.
Liebe Grüße aus Ellwangen,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
Die folgende Nachricht zum Thema stammt von: peterS., 30. 10. 2007, 23:56
gruss Felix, hallo interessierte,
»» »» Du suchst nach einer Art "getElementsByClassName()"
»»
»» ich habe Dir meine Funktion herausgesucht. Hier ist sie:
»»
»» // getElementsByClassName : function (className, element) { var getElementsByClassName = function (className, element) {
//wird spaeter benoetigt:
var nodeObj, nodeClassName, regXTrim = (/^\s+|\s+$/g), regXShrink = (/\s+/g);
»» //element = element ? element : document; // das ist keine hinreichend genaue pruefung - besser:
element = ((element && ((typeof element.getElementsByTagName == "function") || (typeof element.getElementsByTagName == "object"))) ? (element) : (document.documentElement || document.getElementsByTagName("html")[0]));
//auf korrektes [className] attribut wird gar nicht geprueft - kann man z.b. so bewerkstelligen:
//*undefinierte* [className] ausdruecke, resultieren in einer *wildcard*-suche:
className = ((className) ? (String(className).replace(regXTrim, "").replace(regXShrink, " ")) : ("*"));
»» //var muster = new RegExp("(^|\\s)" + className + "(\\s|$)");
//die naechste zeile beruecksichtigt den gerade erwaehnten *wildcard* modus:
var muster = new RegExp(((className == "*") ? ("^.+$") : ("(?:^|\\s)" + className + "(?:$|\\s)")), "");
»» //var alles = element.getElementsByTagName("*");
»» //var gefunden = new Array();
»» //var i;
//zusammenfassen:
var i, len, gefunden = [], alles = element.getElementsByTagName("*");
»» //for (i = 0; i < alles.length; i++) {
for (i=0, len=alles.length; i<len; ++i) {
»» //if (alles[i] && alles[i].className && alles[i].className != "") {
//---------------------------------------------------------^^ genauer:
//if (alles[i] && alles[i].className && alles[i].className !== "") { besser noch:
nodeObj = alles[i];
nodeClassName = nodeObj.className;
//normalisiert alle *white spaces*, um jegliche inkonsistenzen/manipulationen auszuschliessen:
nodeClassName = (((typeof nodeClassName != "undefined") && !((typeof nodeClassName == "object") && !nodeClassName)) ? (String(nodeClassName).replace(regXTrim, "").replace(regXShrink, " ")) : (""));
»» //if (alles[i].className.match(muster)) // für Fälle wie class="xyz abc"
if (muster.test(nodeClassName)) {
»» //gefunden[gefunden.length] = alles[i];
gefunden[gefunden.length] = nodeObj;
»» }
»» }
»»
»» return gefunden;
»» };
oder auch kuerzer unter zuhilfenahme des generischen [[Array]]-iterators [filter]:var getElementsByClassName = (function (className, nodeObj) {
var nodeClassName, regXClassName, regXTrim = (/^\s+|\s+$/g), regXShrink = (/\s+/g);
nodeObj = ((nodeObj && ((typeof nodeObj.getElementsByTagName == "function") || (typeof nodeObj.getElementsByTagName == "object"))) ? (nodeObj) : (document.documentElement || document.getElementsByTagName("html")[0]));
className = ((className) ? (String(className).replace(regXTrim, "").replace(regXShrink, " ")) : ("*"));
var regXClassName = new RegExp(((className == "*") ? ("^.+$") : ("(?:^|\\s)" + className + "(?:$|\\s)")), "");
return Array.filter(nodeObj.getElementsByTagName("*"), (function (elm/*, idx, arr*/) {
nodeClassName = elm.className;
nodeClassName = (((typeof nodeClassName != "undefined") && !((typeof nodeClassName == "object") && !nodeClassName)) ? (String(nodeClassName).replace(regXTrim, "").replace(regXShrink, " ")) : (""));
return regXClassName.test(nodeClassName);
}));
});
aber selbst die korrigierte bzw. die iterierende loesung sucht multiple
klassennamen immer noch in einem *strict*-modus - d.h.: die reihenfolge
der einzelnen schluesselwoerter innerhalb eines solchen mutiplen namens
wird durch den jetzigen suchausdruck streng beruecksichtigt - die durch
die css-spezifikation erlaubten abweichungen in der reihenfolge sowie
auslassungen sind hier ausschlusskriterien und lassen die funktion nicht
getreu dieser spezifikation arbeiten.
sowohl suchausdruck als auch zu vergleichende [className]-elementattribute
verlangen mehr aufmerksamkeit. um den regulaeren ausdruck fuer die suche
fit zu machen, bietet es sich an, eine subroutine zu schreiben. benoetigt
wird eine von reduntanten eintraegen bereinigte liste, aller im multiplen
klassennamen vorkommender schluesselwoerter. darauf laesst sich dann ein
simpler algorithmus stricken, der den anspruchsvolleren suchausdruck generiert://[http://www.pseliger.de/jsExtendedApi/jsApi.Array.normalize.js] - [http://www.pseliger.de/jsExtendedApi/jsApi.Array.normalize.dev.js]
Array.prototype.normalize = (function() {var arr=this,i=0,k=0;while(i<arr.length){k=i+1;while(k<arr.length){if(arr[i]===arr[k]){arr=arr.slice(0,k).concat(arr.slice(k+1,arr.length));--k;}++k;}++i;}for(i=0;i<arr.length;++i){this[i]=arr[i];}this.length=arr.length;});
var regXSplit = (/\s+/);
var getRegExpSearchTerm = (function (str) {
if (regXSplit.test(str)) {
var arr = str.split(regXSplit).sort();
arr.normalize();
str = arr.shift();
arr.forEach(function (elm/*, idx, arr*/) {
str += ("\\s(?:" + elm + "|(?:[^\\s]+\\s)+" + elm + ")");
});
}
return str;
});
var className = "confused happy ashamed joyful joyful ashamed";
var regXClassName = new RegExp(((className == "*") ? ("^.+$") : ("(?:^|\\s)" + getRegExpSearchTerm(className) + "(?:$|\\s)")), "");
alert(regXClassName);
die werte aller [className]-elementattribute muessen ebenfalls
sortiert, normalisiert und in einen stringwert zuruckgefuehrt
werden, sobald es sich bei einem solchen attributwert um eine
multiple klasse handelt.
dannach darf endlich verglichen werden - fertig.
obige erklaerungen in code gegossen - ich bitte um tests und rueckmeldungen:var getElementsByClassName = (function (className, nodeObj) {
var nodeClassName, regXClassName, regXTrim = (/^\s+|\s+$/g), regXShrink = (/\s+/g), regXSplit = (/\s+/);
var getRegExpSearchTerm = (function (str) {
if (regXSplit.test(str)) {
var arr = str.split(regXSplit).sort();
arr.normalize();
str = arr.shift();
arr.forEach(function (elm/*, idx, arr*/) {
str += ("\\s(?:" + elm + "|(?:[^\\s]+\\s)+" + elm + ")");
});
}
return str;
});
nodeObj = ((nodeObj && ((typeof nodeObj.getElementsByTagName == "function") || (typeof nodeObj.getElementsByTagName == "object"))) ? (nodeObj) : (document.documentElement || document.getElementsByTagName("html")[0]));
className = ((className) ? (String(className).replace(regXTrim, "").replace(regXShrink, " ")) : ("*"));
var regXClassName = new RegExp(((className == "*") ? ("^.+$") : ("(?:^|\\s)" + getRegExpSearchTerm(className) + "(?:$|\\s)")), "");
return Array.filter(nodeObj.getElementsByTagName("*"), (function (elm/*, idx, arr*/) {
nodeClassName = elm.className;
nodeClassName = (((typeof nodeClassName != "undefined") && !((typeof nodeClassName == "object") && !nodeClassName)) ? (String(nodeClassName).replace(regXTrim, "").replace(regXShrink, " ")) : (""));
if (regXSplit.test(nodeClassName)) {
nodeClassName = nodeClassName.split(regXSplit).sort();
nodeClassName.normalize();
nodeClassName = nodeClassName.join(" ");
}
return regXClassName.test(nodeClassName);
}));
});
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:]
© 1998-2006 
Impressum, Software: Classic Forum
(JAVASCRIPT)