Klassen selektieren in JavaScript

[muderseb]

Hallo zusammen,

mal eine Anfängerfrage zu JavaScript: Wenn ich bestimmte HTML-Elemente mittels des "style"-Objekts bzgl. ihrer CSS-Eigenschaften ändern will, diese Elemente aber nach dem Class-Attribut selektieren möchte (also will ich beispielsweise nicht die CSS-Angaben von allen "p"-Objekten ändern, sondern nur von solchen, die das Attribut class="beispiel" aufweisen).

Im JavaScript-Abschnitt von SELFHTML habe ich hierzu nichts gefunden. Zum Ändern von CSS-Angaben wird hier wenn ich richtig gelesen habe einfach empfohlen, entweder "GetElementsByTagName", "GetElementsById" oder "GetElementsByName" zusammen mit dem style-Objekt zu verwenden. Das gibt mir aber doch noch keine Möglichkeit an die Hand, nur Elemente einer bestimmten Klasse zu ändern, oder?

Und noch ein kleines Problem: Bisher habe ich folgendes Musterbeispiel aus SELFHTML verwendet, um CSS dynamisch zu ändern:

<script type="text/javascript">
function setCSS () {
  for (var i = 0; i < document.getElementsByTagName("p").length; i++) {
    document.getElementsByTagName("p")[i].style.border = "solid red 10px";
    document.getElementsByTagName("p")[i].style.backgroundColor = "#FF9933";
    document.getElementsByTagName("p")[i].style.color = "#FFFFFF";
    document.getElementsByTagName("p")[i].style.fontSize = "250%";

Die Funktion kapiere ich auch so weit, und es funktioniert auch mit fast allen Elmenten. Will ich jetzt aber beispielsweise keine Absätze, sondern Bilder neu formatieren und schreibe etwa:

<script type="text/javascript">
function setCSS () {
  for (var i = 0; i < document.getElementsByTagName("img").length; i++) {
    document.getElementsByTagName("img")[i].style.border = "solid red 1px";

dann werden ALLE HTML-Elemente auf dem Bildschirm mit einem derart spezifizierten Rahmen ausgestattet. Warum??

Danke im voraus für eure Hilfe,
Sebastian