DOM auf class eines div zugreifen

[Francis]

Hallo,
ich möchte per Javascript auf einen div zugreifen, welches lediglich einen Klassennamen besitzt. Nachfolgenden Code möchte ich dafür verwenden:

var cssKnoten = document.getElementsByTagName("div")[0].getAttributeNode("class");  
for each(var knoten in cssKnoten) {  
	if(knoten == "meinKlassenname") {  
		alert("Element gefunden");  
		var meinElement = knoten;  
	}  
}

Leider wird das alert nicht ausgegeben. Mein eigentliches Ziel ist es die Höhe des Elementes '<div class="meinKlassenname">' zu verändern.
Habe ich einen Denkfehler in der Schleife? Ist es mir überhaupt möglich auf ein div mit einen Klassennamen zuzugreifen?
Ich weiß, dass man einfach per 'document.getElementById("id")' auf einen div mit einer id zugreifen kann. Diesen weg möchte ich aber nicht einschlagen.

[ritschmanhard]

Hallo,
ich möchte per Javascript auf einen div zugreifen, welches lediglich einen Klassennamen besitzt. Nachfolgenden Code möchte ich dafür verwenden:

var cssKnoten = document.getElementsByTagName("div")[0].getAttributeNode("class");

for each(var knoten in cssKnoten) {
if(knoten == "meinKlassenname") {
alert("Element gefunden");
var meinElement = knoten;
}
}

>   
> Leider wird das alert nicht ausgegeben. Mein eigentliches Ziel ist es die Höhe des Elementes '`<div class="meinKlassenname">`{:.language-html}' zu verändern.  
> Habe ich einen Denkfehler in der Schleife? Ist es mir überhaupt möglich auf ein div mit einen Klassennamen zuzugreifen?  
> Ich weiß, dass man einfach per '`document.getElementById("id")`{:.language-javascript}' auf einen div mit einer id zugreifen kann. Diesen weg möchte ich aber nicht einschlagen.  
  
Hi there!  
  
Ich kann es dir nicht näher begründen, aber bei DOM-kompatiblen Browsern (Firefox, Opera, Safari, Netscape, Chrome) funktioniert für das Lesen des Klassennamens:  
document.getElementsByTagName("div")[0].getAttribute("class")  
  
Für den IE 6 funktioniert (auch für IE 7,8, aber die funktionieren eventuell auch mit Lösung 1 - dies habe ich nicht getestet):  
document.getElementsByTagName("div")[0].getAttributeNode("class").value  
  
Grüße,  
Richard  
  

[Francis]

Hallo Richard,

vielen Dank für deine Antwort. Hier nun mein Test:

allDivs = document.getElementsByTagName("div");  
  
for(i = 0; i < allDivs.length; i++){  
	classObject = allDivs[i].getAttributeNode("class").value;  
  
	if(classObject!= null){  
		if(allDivs[i].getAttributeNode("class").value == "if5_rand"){  
			var hoehe = allDivs[i].style.height;  
			alert("hoehe: " + hoehe);  
		}  
	}  
}  

Da ich den Code nur im IE 6 ausführen möchtem verwende ich Deinen zweiten Code. Das Problem ist hierbei, dass die bei der Ausgabe nix erscheint (hoehe: ). Was ist falsch am Code?

[ritschmanhard]

Da ich den Code nur im IE 6 ausführen möchtem verwende ich Deinen zweiten Code. Das Problem ist hierbei, dass die bei der Ausgabe nix erscheint (hoehe: ). Was ist falsch am Code?

Naja, ich vermute, dass du das css height attribut nicht gesetzt hast.
Dieses ist der Fall, wenn du entweder keine Angabe machst (computed style) oder statt:
<div style="height:30px" >
folgendes (fälschlicherweise, da nicht html konform) verwendest:
<div height="30px" >

Den computed style kann man (leider) soweit ich weiß nicht ausgeben (obwohl: da gab es mal ein javascript, das über den parent Pfad irgendwie was ermitteln konnte...)

Gruß,
Richard

[Der Martin]

Hi,

ich möchte per Javascript auf einen div zugreifen, welches lediglich einen Klassennamen besitzt. Nachfolgenden Code möchte ich dafür verwenden:

var cssKnoten = document.getElementsByTagName("div")[0].getAttributeNode("class");

for each(var knoten in cssKnoten) {
if(knoten == "meinKlassenname") {
alert("Element gefunden");
var meinElement = knoten;
}
}

  
das kann nicht funktionieren - du greifst auf das erste div-Element im Dokument zu und besorgst dir eine Referenz auf dessen class-Attributknoten.  
Diesen Attributknoten willst du dann weiter durchsuchen. Seltsam ...  
  

> Leider wird das alert nicht ausgegeben.  
  
Das hätte mich auch sehr verwundert, denn ein Attributknoten hat selbst keine weiteren Kindknoten.  
  
Ich würde einfach über die div-Elemente im Dokument iterieren und jeweils deren Klassennamen abfragen:  
  
 ~~~javascript
var divlist = document.getElementsByTagName("div");  
 for (var i=0; i<divlist.length; i++)  
  { if (divlist[i].className && divlist[i].className="klasse")  
     { alert("Gefunden!");  
       DoSomethingWith(divlist[i]);  
     }  
  }

Das ist sicher verbesserungsfähig - aber der Codeschnipsel berücksichtigt sowohl den Fall, dass mehrere div-Elemente mit dem gesuchten Klassennamen existieren, als auch den, dass kein solches Element existiert (dann passiert einfach nichts).

So long,
 Martin

[Francis]

var divlist = document.getElementsByTagName("div");

for (var i=0; i<divlist.length; i++)
  { if (divlist[i].className && divlist[i].className=="klasse")
     { alert("Gefunden!");
       DoSomethingWith(divlist[i]);
     }
  }

  
Funktioniert wunderbar. Nur wie kann ich jetzt auf "offsetHeight" zugreifen? `divlist[i].offsetHeight`{:.language-javascript} funktioniert so nicht. `divlist[i].style.height`{:.language-javascript} ist leider nicht definiert.

[Der Martin]

Hi,

»»  ~~~javascript

var divlist = document.getElementsByTagName("div");

»»  for (var i=0; i<divlist.length; i++)
»»   { if (divlist[i].className && divlist[i].className=="klasse")
»»      { alert("Gefunden!");
»»        DoSomethingWith(divlist[i]);
»»      }
»»   }

>   
> Funktioniert wunderbar. Nur wie kann ich jetzt auf "offsetHeight" zugreifen? `divlist[i].offsetHeight`{:.language-javascript} funktioniert so nicht.  
  
was heißt "funktioniert nicht"? Ich kann mir im Moment nicht vostellen, woran das scheitern sollte.  
  

> `divlist[i].style.height`{:.language-javascript} ist leider nicht definiert.  
  
Richtig, es ist nur dann definiert, wenn du per Stylesheet oder per Javascript die height-Eigenschaft explizit gesetzt hast. Das ist aber bekannt.  
  
So long,  
 Martin  

-- 
Ordnung ist, wenn man etwas findet, was man gar nicht sucht.

[Francis]

Hallo Martin,

wie ich gerade sehe, lag ich falsch. Ich kann doch auf "offsetHeight" zugreifen. Hier nun mein funktionierender Code:

 var divlist = document.getElementsByTagName("div");  
 for (var i=0; i<divlist.length; i++) {  
 		if (divlist[i].className && divlist[i].className=="if5_rand"){  
			alert(divlist[i].offsetHeight);  
			if(divlist[i].offsetHeight % 2) {  
				divlist[i].style.height = divlist[i].offsetHeight + 1;  
				alert(divlist[i].offsetHeight);  
			}  
     	}  
  }

Vielen Dank an alle, die sich daran beteiligt haben.

[Hans Wurst]

var cssKnoten = document.getElementsByTagName("div")[0].getAttributeNode("class");

for each(var knoten in cssKnoten) {

alert(knoten +" --> "+ cssKnoten); // Prüfen, ob die IF-Anweisung überhaupt irgendwann wahr wird.

if(knoten == "meinKlassenname") {
alert("Element gefunden");
var meinElement = knoten;
}
}

  
Moderne Browser unterstützen auch: `document.getElementsByClassName()`{:.language-javascript}

[Cybaer]

Hi,

Moderne Browser unterstützen auch: document.getElementsByClassName()

... was man für ältere Browser auch als JS-Funktion einfach aus dem Netz holen, und dann auf seinen Seiten einbinden kann.

Gruß, Cybaer