Javascript - document.getElementById statt Id Classname?

[Philipp310]

Ich schon wieder :0
Noch immer habe ich keine Ahnung von Javascript, ich versuche aber mich zu bessern.
Meine Frage ist, ich hab schon tausendmal gegoogelt und keine (für mich) ausreichende Antwort gefunden, wie man - wie mit der Methode getElementById - statt auf die Id auf den Klassennamen zugreifen kann.
Hoffe auf Hilfe,
Philipp

[JürgenB]

Hallo Philipp310,

das nusst du selbst basteln:

google(getElementByClass)

Gruß, Jürgen

[Philipp310]

Beim Selfhtml-Archiv und bei Google hab ich schon geguckt, ich verstehe es einfach nicht >:
Aus Interesse: Wieso gibts diese Funktion nicht für dumme Leute wie mich??

Mfg
Philipp310

[Felix Riesterer]

Lieber Philipp310,

Beim Selfhtml-Archiv und bei Google hab ich schon geguckt, ich verstehe es einfach nicht >:

solche Bemerkungen sind nicht zielführend. Was ist "es", das Du nicht verstehst? Bis wohin geht denn Dein Verständnis?

Aus Interesse: Wieso gibts diese Funktion nicht für dumme Leute wie mich??

Diese Funktion ist lange nach dem Erfinden von JavaScript entstanden, da ihre Notwendigkeit erst mit der Zeit kam. Da die Browser das nativ noch nicht unterstützt hatten, hat man sich so ein Ding eben selbst geschrieben. Die einen nannten es getElementsByClass, andere getElementsByClassName. Moderne Browser unterstützen diese Methode inzwischen sogar nativ (z.B. Beispiel Firefox ab Version 3).

Liebe Grüße,

Felix Riesterer.

[Felix Riesterer]

Lieber Philipp310,

Du suchst nach "getElementsByClassName", stimmt's? Hier im Archiv findest Du sicher was brauchbares.

Liebe Grüße,

Felix Riesterer.

[Gunnar Bittersmann]

@@Philipp310:

nuqneH

wie mit der Methode getElementById - statt auf die Id auf den Klassennamen zugreifen kann.

Für welchen Anwendungsfall denkst du, das zu benötigen?

Meist geht es anders. Und besser.

Qapla'

[Matti Mäkitalo]

Hi,

Da muss ich mal nachfragen:

wie mit der Methode getElementById - statt auf die Id auf den Klassennamen zugreifen kann.

Für welchen Anwendungsfall denkst du, das zu benötigen?

Meist geht es anders. Und besser.

Vielleicht verstehe ich Philipp310 anders als du. Ich nehme an, er sucht sowas wie document.getElementsByClassName().

Und diese Funktion nutze ich doch recht häufig (bzw: eigentlich nutze ich eher das jQuery-Äquivalent $('.classname') oder Closures goog.dom.getElementsByTagNameAndClass()).

Anwendungsfälle finden sich doch recht viele: wenn ich mit JavaScript alle Knoten haben will, die zu einer Klasse gehören. Vor data-* habe ich in Klassen gerne mal Anwendungsdaten untergebracht, und jetzt nutze ich gemeinsame Klassen immer noch gerne, um z.B. Elemente für Animationen auszuwählen o.ä.

Wie willst du sowas "besser" lösen? Ist document.getElementsByClassName() nicht genau das richtige Werkzeug, wenn ich Elemente anhand ihrer Klasse auswählen will?
Oder allgemein: wenn ich (aus Markup-Sicht gedacht) nicht-zusammenhängende Elemente selektieren will? Also genauso in den Situationen, in denen ich auch für Styling eine Klasse vergeben würde?

Bis die Tage,
Matti

[Gunnar Bittersmann]

@@Matti Mäkitalo:

nuqneH

Wie willst du sowas "besser" lösen? Ist document.getElementsByClassName() nicht genau das richtige Werkzeug, wenn ich Elemente anhand ihrer Klasse auswählen will?

Kommt drauf an, wozu du das willst. Wenn es darum geht, alle Elemente einer bestimmten Klasse dynamisch umzustylen, braucht man kein document.getElementsByClassName().

http://forum.de.selfhtml.org/archiv/2009/12/t193344/#m1291116
http://forum.de.selfhtml.org/archiv/2010/4/t197321/#m1323481
http://forum.de.selfhtml.org/archiv/2010/11/t201469/#m1359143

Qapla'

[Matti Mäkitalo]

Hi,

Wie willst du sowas "besser" lösen? Ist document.getElementsByClassName() nicht genau das richtige Werkzeug, wenn ich Elemente anhand ihrer Klasse auswählen will?

Kommt drauf an, wozu du das willst. Wenn es darum geht, alle Elemente einer bestimmten Klasse dynamisch umzustylen, braucht man kein document.getElementsByClassName().

Ah, danke für die Infos, diese Diskussionen gingen an mir vorbei.

Ich nutze momentan diese Funktion um z.B. Event-Handler an die Nodes zu binden. U.U. weiß ich vorher nicht, ob oder wo gewisse Elemente existieren.

Beispiel: ich lade mir ein Template um ein DOM-Fragment zu erstellen. Dieses Template entscheidet anhand der Eingabedaten, ob es gewisse Buttons darstellt oder nicht. Nach dem evaluieren greife ich mit getElementsByClassNameauf das DOM-Fragment zu und binde allen Elementen mit der Klasse an meinen Event-Handler.

So könnte ich ggf. die Templates austauschen, ohne das JS anpassen zu müssen. Derjenige, der das Template schreibt, muss nur die Zuordnung von Klasse zu Event-Handler kennen.

Letzte Frage (und ich gebe zu, dass ich dies durch selbstausprobieren auch evaluieren könnte): ist ein getElementsByClassName langsamer als ein entsprechender Selektor in CSS? Es passiert doch beim Traversieren des DOM-Baumes in beiden Fällen nichts wesentlich anderes.

Bis die Tage,
Matti

[Gunnar Bittersmann]

@@Matti Mäkitalo:

nuqneH

Letzte Frage (und ich gebe zu, dass ich dies durch selbstausprobieren auch evaluieren könnte): ist ein getElementsByClassName langsamer als ein entsprechender Selektor in CSS? Es passiert doch beim Traversieren des DOM-Baumes in beiden Fällen nichts wesentlich anderes.

Der Browser dürfte beim Verarbeiten des Stylesheets schon traversiert haben. Wenn sich dann die Klasse eines Elements von "foo" auf "bar" ändert, kann er blitzschnell die Darstellung ändern: Die Regeln für '.foo .quz' greifen nicht mehr, dafür jene für '.bar .quz'.

Bei getElementsByClassName würde der Browser erst beim Aufruf der Funktion das DOM traversieren, also bspw. auf eine Nutzeraktion hin. Das dauert dann halt ein bisschen, die daraufhin folgende Styleänderung aller Elemente der Klasse "quz" lässt auf sich warten. Und das bei jeder Änderung erneut.

Qapla'

[Matti Mäkitalo]

Hi,

Letzte Frage (und ich gebe zu, dass ich dies durch selbstausprobieren auch evaluieren könnte): ist ein getElementsByClassName langsamer als ein entsprechender Selektor in CSS? Es passiert doch beim Traversieren des DOM-Baumes in beiden Fällen nichts wesentlich anderes.

Der Browser dürfte beim Verarbeiten des Stylesheets schon traversiert haben. Wenn sich dann die Klasse eines Elements von "foo" auf "bar" ändert, kann er blitzschnell die Darstellung ändern: Die Regeln für '.foo .quz' greifen nicht mehr, dafür jene für '.bar .quz'.

Szenario:

Gegeben sei folgendes Fragment:

<section>  
<h1>Bla</h1>  
<p>Irgendeintext</p>  
</section>  
<section>  
<h1>Blub</h1>  
<p>Nocheintext</p>  
</section>  

und folgende Regel:

.sec p {  
   color: red;  
}

Wenn ich nun einem der section-Nodes der Klasse "sec" zuweise, dann muss der Browser diese Regel neu auswerten. In diesem Fall ist das einfach: alle Absätze unterhalb. Dort könnte aber auch noch ein Klassenselektor stehen. Ich kann mir schwerlich vorstellen, dass der Browser anhand einer zu Beginn "inaktiven" (weil nicht benutzten) Regel schonmal alle Knoten vormerkt, die potenziell durch Klassenänderungen verändert werden könnten. Meine Schlußfolgerung wäre: dann muss der Browser neu suchen. Und dieser Aufwand dürfte im Prinzip document.getElementsByClassName() sein.

Bis die Tage,
Matti

[molily]

ist ein getElementsByClassName langsamer als ein entsprechender Selektor in CSS?

Der Browser dürfte

Der Entwickler dürfte nicht spekulieren, sondern benchmarken.

Bei getElementsByClassName würde der Browser erst beim Aufruf der Funktion das DOM traversieren, also bspw. auf eine Nutzeraktion hin.

Das ist unplausibel. Es wird wahrscheinlich dieselbe Hashtabelle verwenden, die er zum Anwenden von Klassenselektoren verwendet. Er wird sicher nicht mit jedem getElementsByClassName das gesamte DOM noch einmal durchlaufen.

Das dauert dann halt ein bisschen, die daraufhin folgende Styleänderung aller Elemente der Klasse "quz" lässt auf sich warten. Und das bei jeder Änderung erneut.

Eher das ist das Problem: Das DOM ist langsam und das einzelne Ändern von Knoten samt Anwenden der Styles und Paiting dauert erfahrungsgemäß. Das sind aber nur allgemeine Erkenntnisse. Bei so konkreten Fragen heißt es entweder benchmarken oder Quellcode von Browsern lesen.

Mathias

[JürgenB]

Hallo Gunnar,

Meist geht es anders. Und besser.

ich benutze diese Methode, um Javascripte an das HTML zu koppeln: Script sucht Element nach Klassennamen und macht etwas damit, z.B. Tabellensortierung vorbereiten.

Gruß, Jürgen