Auf Klasse zugreifen

[tobi]

Hi!

wie kann ich auf eine klasse zugreifen? auf eine id geht das ja mit getElementById... aber wie heißt die funktion um auf eine klasse zuzugreifen?

danke! tobi

[Cheatah]

Hi,

wie kann ich auf eine klasse zugreifen? auf eine id geht das ja mit getElementById... aber wie heißt die funktion um auf eine klasse zuzugreifen?

die Funktion (genauer gesagt Methode) wäre getAttribute(), aber Du solltest ggf. die className-Eigenschafte bevorzugen.

Cheatah

[tobi]

hi!
Vielen Dank für deine antwort. allerdings kapier ich das nicht so ganz,...sorry.
aber beides hilft mir, wenn ich das richtig verstanden habe, nicht weiter. Ich möchte ganz einfach die hintergrundfarbe einer klasse dynamisch ändern. etwa so:

function test(){
  document.getElementsByClass("testclass").style.backgroundColor = "000000";
}

Aber da es ja leider keine funktion gibt, die getElementsByClass(). Aber ich kapiere nicht, wie ich das mit getAttribute() oder className anstellen sollte?! Könntest du mir bitte sagen, wie ich das machen muss? Ich komme wirklich nicht drauf...

Danke und LG, tobi

[Mathias Brodala]

Hallo tobi.

Aber da es ja leider keine funktion gibt, die getElementsByClass().

Hast du schon einmal danach gesucht?

Einen schönen Donnerstag noch.

Gruß, Mathias

[tobi]

Guten abend!

Aber da es ja leider keine funktion gibt, die getElementsByClass().

Hast du schon einmal danach gesucht?

ich habe es gerade getan. dabei habe ich diese funktion gefunden. könnt ihr experten mir sagen, ob diese funktion brauchbar ist?

function getElementsByClass(searchClass,node,tag) {
 var classElements = new Array();
 if ( node == null )
  node = document;
 if ( tag == null )
  tag = '*';
 var els = node.getElementsByTagName(tag);
 var elsLen = els.length;
 var pattern = new RegExp("(^|\s)"+searchClass+"(\s|$)");
 for (i = 0, j = 0; i < elsLen; i++) {
  if ( pattern.test(els[i].className) ) {
   classElements[j] = els[i];
   j++;
  }
 }
 return classElements;
}

ist das sinnvoll, das einzusetzen?
danke schön, tobi

[Mathias Brodala]

Hallo tobi.

Aber da es ja leider keine funktion gibt, die getElementsByClass().

Hast du schon einmal danach gesucht?

ich habe es gerade getan. dabei habe ich diese funktion gefunden. könnt ihr experten mir sagen, ob diese funktion brauchbar ist?

Theoretisch ja, aber …

// …

var pattern = new RegExp("(^|\s)"+searchClass+"(\s|$)");
// …

  
… dies gibt mir Rätsel auf. Der reguläre Ausdruck würde hiernach /(^|\s)foo(\s|$)/ lauten, wenn als Klasse „foo“ angegeben wurde. Wozu hier jedoch die Pipes („|“) dienen sollen, erschließt sich mir gerade nicht. Dies würde voraussetzen, dass der Inhalt der jeweiligen className-Eigenschaft zuerst an den Leerzeichen getrennt und direkt daraufhin wieder mittels Pipes zusammengesetzt wird. Doch dazu wird auf [der Seite des Autors](http://www.dustindiaz.com/getelementsbyclass/) nichts erwähnt …  
  
Die beste mir bekannte Übersichtsseite zum Thema ist [getElementsBy*()](http://getelementsby.com/). Nutzbar sind sicher alle, Unterschiede dürfte es lediglich in der Performance bei größeren Dokumenten geben. Probieren geht hier wieder einmal über Studieren.  
  
  
Einen schönen Donnerstag noch.  
  
Gruß, Mathias  

-- 
ie:% fl:| br:< va:) ls:& fo:) rl:( n4:~ ss:) de:] js:| mo:| zu:)  
  
debian/rules

[Mathias Brodala]

Hallo nochmal.

Theoretisch ja, aber …

// …

var pattern = new RegExp("(^|\s)"+searchClass+"(\s|$)");
// …

>   
> … dies gibt mir Rätsel auf. Der reguläre Ausdruck würde hiernach /(^|\s)foo(\s|$)/ lauten, wenn als Klasse „foo“ angegeben wurde. Wozu hier jedoch die Pipes („|“) dienen sollen, erschließt sich mir gerade nicht.  
  
Aber glücklicherweise schaue ich ja stets genauer hin und merke noch vor dem Absenden meines Postings, dass die Pipe hier als ODER fungiert. Also: „foo“ entweder am Anfang (^foo), in der Mitte (\sfoo\s), am Ende (foo$) oder ganz allein (^foo$).  
  
  
Prost.  
  
Gruß, Mathias  

-- 
ie:% fl:| br:< va:) ls:& fo:) rl:( n4:~ ss:) de:] js:| mo:| zu:)  
  
debian/rules

[MudGuard]

Hi,

… dies gibt mir Rätsel auf. Der reguläre Ausdruck würde hiernach /(^|\s)foo(\s|$)/ lauten, wenn als Klasse „foo“ angegeben wurde. Wozu hier jedoch die Pipes („|“) dienen sollen, erschließt sich mir gerade nicht.

Pipes in regulären Ausdrücken stehen für Alternative - entweder das links davon oder das rechts davon.

Hier also: \s|$ - also entweder ein Whitespace oder aber das Stringende bzw. bei ^|\s Stringanfang oder Whitespace.
Dies ist nötig, da das class-Attribut mehrere Whitespace-getrennte Klassennamen enthalten darf und andererseits mit "foo" nicht die Klasse "foolish" oder "barfood" gefunden werden soll.

Dies würde voraussetzen, dass der Inhalt der jeweiligen className-Eigenschaft zuerst an den Leerzeichen getrennt und direkt daraufhin wieder mittels Pipes zusammengesetzt wird.

Wie kommst Du auf die Idee, daß die Pipes etwas mit Zusammensetzen zu tun haben könnten?

cu,
Andreas

[shn]

Servus,

Dies ist nötig, da das class-Attribut mehrere Whitespace-getrennte Klassennamen enthalten darf und andererseits mit "foo" nicht die Klasse "foolish" oder "barfood" gefunden werden soll.

Kompakter/ueberischtlicher waere die Verwendung von Wortgrenzen, also \bfoo\b

Gruss
Patrick

[MudGuard]

Hi,

Dies ist nötig, da das class-Attribut mehrere Whitespace-getrennte Klassennamen enthalten darf und andererseits mit "foo" nicht die Klasse "foolish" oder "barfood" gefunden werden soll.
Kompakter/ueberischtlicher waere die Verwendung von Wortgrenzen, also \bfoo\b

Das mag zwar übersichtlicher sein, ist aber falsch.

\b matcht eine Position, auf der auf einer Seite ein Word-Character ist und auf der anderen Seite kein Word-Character.
Nicht jede dieser Stellen muß eine Grenze für eine Klasse sein.

täst ist z.B. ein zulässiger Klassenname (sowohl in HTML als auch in CSS).
ä wird (zumindest in den Javascript-Interpretern von Firefox und Opera) nicht als Word-Character betrachtet.
Bei "täst" gibt es also 4 Stellen, an denen \b matcht (vor dem ersten t, zwischen dem t und dem ä, zwischen dem ä und dem s und nach dem zweiten t.
Bei "test" gibt es nur 2 Stellen, an denen das \b matcht (vor dem ersten und nach dem zweiten t).

Probier mal
alert("test".match(/\bt\b/) + "\n" + "täst".match(/\bt\b/));
aus.
In der ersten Zeile steht null (weil kein match), in der zweiten t (weil das erste t gematcht wird).

cu,
Andreas

[Cybaer]

Hi,

Aber da es ja leider keine funktion gibt, die getElementsByClass().

Mit einer solchen Funktion, werden alle Elemente ermittelt, die (mom.) zu dieser Klasse gehören.

Wenn Du die Klasse selbst (und nicht alle Elemente einzeln) ändern möchtest: Coding: CSS-Regeln (& Stylesheets) auslesen & ändern

Das ergäbe für dein Beispiel dann: cssRule(".testclass","background-color","#000000");

Gruß, Cybaer