div: Ersatz für name Attribut

[blumentopf]

Hallo,
ich habe bei einem Projekt eine java function verwendet, die mit einer for Schleife alle vorhandenen Elemente mit dem gleichen name anspricht, um so mit einer einfachen Funktion alle Elemente einer Gruppe ausblenden zu können.
Dummerweise habe ich erst beim Validierungsversuch festgestellt dass z.B. ein <div> gar nicht mit dem Attribut name versehen werden kann.
Das wäre für meine Zwecke jedoch sehr praktisch gewesen.

Eigentlich hatte ich mit der Darstellung auch keine Probleme, bis ich jetzt endlich mal auf Windows mit IE getestet habe. Das ist der einzige mir verfügbare Browser, der die Seite nicht wie gewünscht darstellt. D.h. die Elemente werden bei Klick auf den Verweis nicht eingeblendet. In der Statusleiste erscheint die Meldung Fehler auf der Seite. Lösche ich aus den Links den Hide befehl, der die unzulässigen name Attribute anspricht, werden die übrigen Befehle zum Anzeigen, die die Elemente per ID ansprechen, ausgeführt.

Könnte das an den <div name="soundso"> </div> Elementen liegen?
Und gibt es eine Ersatzmöglichkeit, ohne immer sämtliche möglicherweise gerade offenen divs und spans einzeln per ID anzusprechen?

[ChrisB]

Hi,

ich habe bei einem Projekt eine java function verwendet,

Du meinst sicher JavaScript.

Und gibt es eine Ersatzmöglichkeit, ohne immer sämtliche möglicherweise gerade offenen divs und spans einzeln per ID anzusprechen?

Es gibt viele Möglichkeiten, HTML-Elemente aus JavaScript heraus anzusprechen.

Welche sich anbieten, kommt darauf an, was die Elemente gemeinsam haben - Elementnamen, Vorfahrenelement, Klasse, ...

MfG ChrisB

[blumentopf]

Ja, eine JavaScript function wollte ich sagen.

Welche sich anbieten, kommt darauf an, was die Elemente gemeinsam haben - Elementnamen, Vorfahrenelement, Klasse, ...

Ich würde gerne viele unterschiedliche Elemente ansprechen können. Auf der Seite werden Inhalte über eine Linkleiste eingeblendet. Damit sie sich nicht überlagern, werden zuvor all diese Inhaltselemente ausgeblendet, um eines davon dann wieder einzublenden. Dadurch muss ich nicht wissen, welches Element gerade eingeblendet ist, da beim Wechsel immer alle ausgeblendet werden. Es handelt sich dabei zwar als oberste Klammer immer um ein div, allerdings gibt es innerhalb der divs noch weitere divs, die ich nicht im selben Momont ansprechen möchte. Und an anderer Stelle möchte ich auch mal ein img mit ansprechen.
Die Klasse bietet sich nicht an, da die einzelnen Elemente unterschiedlichen Klassen angehören. Außer man würde sämtliche in Frage kommenden Klassen ansprechen, das wäre immer noch einfacher, als sämtliche id's aufzulisten. Oder gibt es eine Möglichkeit über die Kombination von Klassenzugehörigkeiten das alles auf einmal zu machen (wie bei <http://de.selfhtml.org/css/formate/zentrale.htm#klassen@title=.extra.hinterlegt {}>)?

Dank und Gruß

[ChrisB]

Hi,

Die Klasse bietet sich nicht an, da die einzelnen Elemente unterschiedlichen Klassen angehören.

Ein Element kann zu mehr als einer Klasse gehören.

MfG ChrisB

[blumentopf]

Hallo und vielen Dank für die Tipps!

Ein Element kann zu mehr als einer Klasse gehören.

Dann würde ich allen zu schließenden Elementen eine Schließklasse zu teilen,
also z.B. <div class="schliessklasse formatklasse">, dann gehört das Element zu beiden Klassen?

Und gibt es denn die Methode getElementsByClassName jetzt wirklich, oder muss man sie wie im Link von Felix Riesterers Beitrag erst bauen? Bei der selfhtml Suche wird sie nicht gezeigt.

Grüße

[ChrisB]

Hi,

Dann würde ich allen zu schließenden Elementen eine Schließklasse zu teilen,
also z.B. <div class="schliessklasse formatklasse">, dann gehört das Element zu beiden Klassen?

Ja.

Und gibt es denn die Methode getElementsByClassName jetzt wirklich, oder muss man sie wie im Link von Felix Riesterers Beitrag erst bauen? Bei der selfhtml Suche wird sie nicht gezeigt.

Ja, es gibt sie wirklich :-) Mit HTML5 ist sie auch standardisiert worden.

Beschreibung/Anwendungsbeispiele für Firefox/Mozilla hier: https://developer.mozilla.org/en/DOM/document.getElementsByClassName
In anderen Browsern sollte sie analog arbeiten - und in denen, die sie noch nicht kennen, muss man sie halt selber „nachrüsten“ - was dann logischerweise nicht so performant sein wird, wie eine native Implementierung, sich aber im konkreten Anwendungsfall nicht allzu negativ bemerkbar machen sollte (wenn man eine halbwegs vernünftige Implementierung wählt).

MfG ChrisB

[blumentopf]

Hallo,
ich habe jetzt folgende beide Funktionen im Scriptbereich. hide ist die leicht abgewandelte Schleife für getElementsByName von ChrisB, darunter die Function aus PeterS JS Bibliothek.
Dennoch meckert IE, das Objekt in Zeile 52 unterstütze diese Eigenschaft oder Methode nicht. Folglich wird auch die ganze Onclick Aktion mit weiteren Befehlen nicht ausgeführt.
Fehlt da vielleicht noch ein Zusatz, um die Funktion als Methode verfügbar zu machen? Ich habe leider bei der von Felix Riesterer verlinkten Diskussion etwas den Boden verloren, und auch nicht ganz kapiert, welches jetzt am Ende die nutzbare Variante war.
 Dank und Gruß

function hide(elementName) {
  var elements = document.getElementsByClassName(elementName);//das ist Zeile 52
  var numElements = elements.length;
  for(var index = 0; index < numElements; index++) {
    elements[index].style.display = "none";
  }

function getElementsByClassName(class_name)
{
  var all_obj,ret_obj=new Array(),j=0;
  if(document.all)all_obj=document.all;
  else if(document.getElementsByTagName && !document.all)all_obj=document.getElementsByTagName("*");
  for(i=0;i<all_obj.length;i++)
  {
    if(all_obj[i].className==class_name)
    {
      ret_obj[j]=all_obj[i];
      j++
    }
  }
  return ret_obj;
}

[Matti Maekitalo]

Tach auch.

if(all_obj[i].className==class_name)

Die Zeile funktioniert nur, wenn die gesuchten Elemente nur in der einen angeforderten Klasse sind, nicht, wenn sie in mehreren sind. Dazu musst du dann entweder per regex oder mit strpos/... o.ä. suchem.

Bis die Tage,
Matti

[blumentopf]

Hallo Matti,

vielen Dank für den Hinweis. Ist das dann mit der Variante von Felix behoben?

[Felix Riesterer]

Lieber blumentopf,

Fehlt da vielleicht noch ein Zusatz, um die Funktion als Methode verfügbar zu machen? Ich habe leider bei der von Felix Riesterer verlinkten Diskussion etwas den Boden verloren, und auch nicht ganz kapiert, welches jetzt am Ende die nutzbare Variante war.

zuerst die Methode, die ich benutze:

var 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))  
                gefunden.push(alles[i]);  
        }  
    }  
  
    return gefunden;  
}

Du kannst ja prüfen, ob document.body.getElementsByClassName existiert:

if (document.body.getElementsByClassName) {  
    // existiert nativ  
    var gesucht = meinElement.getElementsByClassName("hidden");  
} else {  
    // existiert nicht nativ -> Workaround  
    var gesucht = getElementsByClassName("hidden", meinElement);  
}

Wenn dem so ist, dann kannst Du bei jedem HTML-Elementobjekt diese Methode voraussetzen (es sei denn, diese Methode wurde durch eine andere von Dir eingesetzte Bibliothek eingeführt). Alternativ kannst Du auch einfach darauf pfeifen, ob die Methode nativ zur Verfügung steht, und einfach immer obige Funktion anwenden.

Liebe Grüße,

Felix Riesterer.

[blumentopf]

Hallo Felix,
vielen Dank für die Hilfe. Ich habe jetzt Deine Methode eingebaut, nach wie vor sagt IE8 aber zu dieser Zeile:
var elements = document.getElementsByClassName(elementName);
"Meldung: Das Objekt unterstützt diese Eigenschaft oder Methode nicht."

Zur Anfrage
if (document.body.getElementsByClassName) {
vermeldet er "Objekt erforderlich"

Hast Du eine Idee, woran das liegen könnte? Eigentlich sollte mit Deinem Code doch die Methode eingeführt worden sein.
Dank und Gruß

[blumentopf]

Hallo,
ich habe jetzt noch einmal eine Testseite kreiert, um die Funktion zu auszuprobieren, und auszuschließen, dass es sich bei dem oben genannten Problem um einen anderen Fehler auf der ansonsten relativ umfangreichen Seite handelt.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  
<html>  
  
<head>  
<script type="text/javascript">  
var 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))  
                gefunden.push(alles[i]);  
        }  
    }  
  
    return gefunden;  
}  
	  
	  function hide(){  
	  document.getElementsByClassName("Klasse")[0].style.display = "none";  
	  }  
	  
	  </script>  
	  </head>  
	  <body>  
	  <div class="Klasse">Hallo Welt</div>  
	<A HREF="javascript:hide('Klasse');">  schlie&szlig;en</A>  
	  </body>

Nach wie vor streikt IE mit folgender Begründung:

Details zum Fehler auf der Webseite

Benutzer-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0)
Zeitstempel: Sun, 26 Sep 2010 17:24:01 UTC

Meldung: Das Objekt unterstützt diese Eigenschaft oder Methode nicht.
Zeile: 26
Zeichen: 4
Code: 0
URI: http://www...de/Test2.html

Meldung: Das Objekt unterstützt diese Eigenschaft oder Methode nicht.
Zeile: 26
Zeichen: 4
Code: 0
URI: http://www...de/Test2.html

Woran liegt das? Habe ich da etwas völlig falsch verstanden beim Einsatz dieser Funktion?
Dank und Gruß

[Jean-Max]

Bounjoun blumentopf,

document.getElementsByClassName("Klasse")[0].style.display = "none";

^^^^^^^^

Fällt Dir was auf?

Meldung: Das Objekt unterstützt diese Eigenschaft oder Methode nicht.

Und jetzt? Welches Objekt ist wohl gemeint?

Meines Erachtens ist die Meldung des IE (getestet mit Version 8) richtig, denn eine selbstgeschriebene Funktion ist keine Methode des document-Objekts. Warum FF den Code ausführt, werden uns die Experten sicher verraten können (ich ja nur Eggspert).

Adiou.

[Jean-Max]

Bounjoun Patrick,

Warum FF den Code ausführt

Aargh, weil der auf die bereits implementierte Methode (die der IE nicht kennt) zugreift...

Adiou.

[blumentopf]

Ihr seid ein Schatz...:)
Auf der Testseite funktioniert es jetzt mit window.etc statt document.etc genauso wie ich mir das von einer Methode vorstelle.
Jetzt kann es weitergehen.
Viele Grüße und besten Dank

[Der Martin]

Hi,

var getElementsByClassName = function (className, element) { ... }

damit erzeugst du die Funktion (bzw. ein Funktionsobjekt) im globalen Scope - genaugenommen also als Methode des window-Objekts.

function hide(){
  document.getElementsByClassName("Klasse")[0].style.display = "none";
  }

Hier rufst du eine Methode des document-Objekts auf, die der IE nicht kennt.

Nach wie vor streikt IE mit folgender Begründung:
Meldung: Das Objekt unterstützt diese Eigenschaft oder Methode nicht.
Zeile: 26
Zeichen: 4

Das ist dann vermutlich genau die Zeile mit dem oben zitierten Aufruf.

Woran liegt das? Habe ich da etwas völlig falsch verstanden beim Einsatz dieser Funktion?

Jein. Das Problem ist, *wo* diese Funktion aufgehängt wird. Im JS-Sprachstandard, den fast alle Browser außer dem IE kennen, ist getElementsByClassName() eine Methode des document-Objekts. Deine für den IE nachgelegte gleichnamige Methode ist aber eine Methode des window-Objekts.

Du musst also

* entweder beim Aufruf der Methode prüfen, ob document.getElementsByClassName existiert, und falls ja, dann diese Methode aufrufen, ansonsten window.getElementsByClassName - und da window das globale Objekt ist, kannst du es auch weglassen.

* oder bei der Definition der Methode prüfen, ob document.getElementsByClassName existiert, und falls ja, die Definition übergehen, andernfalls das erzeugte Funktionsobjekt dem document-Objekt als neue Methode anhängen.

So long,
 Martin

[Felix Riesterer]

Lieber blumentopf,

moderne Browser bieten eine HTML-Elementobjekt-Methode namens "getElementsByClassName" an. Bevor sie das taten, hat man sich mit einer eigenen Funktion diese Möglichkeit nachgebaut.

Liebe Grüße,

Felix Riesterer.

[Take]

Moin,

wenn du wirklich nur _ein_ div hast, das du auf einmal ansprechen willst, würde ich id nehmen (und dazu passend: http://de.selfhtml.org/javascript/objekte/document.htm#get_element_by_id@title=getElementById()).

Grüße,

Take