DOM Element by atttribute value

[Steffen M.]

Hallo,

Ich wollte mal fragen, ob mir jemand einen Tipp geben kann, wie man mit javascript DOM eine knotenliste nach attributen groupieren kann und entsprechend in eine neue Variable schreiben kann.

also etwa

var farbListe = document.getElementsByTagName('farbe');
???
???
var farbListeGroupiert = ????

Welche Moeglichkeiten gibt es dazu. Kennt jemand eine gute Seite wo man entsprechende Methoden nachlesen kann. Wuede mir es ja gerne anlesen, aber ich finde nicht die richtigen Seite hierfuer (ich kome aus der XSL Ecke , wuerde es aber gern einmal mit DOM versuchen)

Zu Veranschaulichung

  
<farben>  
   <farbe auswahl="yellow"/>  
   <farbe auswahl="yellow"/>  
  <farbe auswahl="red"/>  
  <farbe auswahl="green"/>  
  <farbe auswahl="green"/>  
  <farbe auswahl="yellow"/>  
  <farbe auswahl="blue"/>  
</farben>  
  
als Ergebnis dann  
<farben>  
  <farbe auswahl="yellow"/>  
  <farbe auswahl="red"/>  
  <farbe auswahl="green"/>  
  <farbe auswahl="blue"/>  
</farben>  
  

Vielen Dank fuer Verweise und Anregungen,

Steffen

[Cybaer]

Hi,

Kennt jemand eine gute Seite wo man entsprechende Methoden nachlesen kann.

http://jacksleight.com/old/blog/2008/01/14/getelementsby/

Wuede mir es ja gerne anlesen, aber ich finde nicht die richtigen Seite hierfuer

Eine Suche nach *getElementsByAttribute JavaScript* sollte wohl schon hinreichend sein. Ob man so etwas programmieren kann, wenn man es noch nicht mal suchen kann, sei natürlich dahingestellt ... >;->

Gruß, Cybaer

[Steffen]

Verzeih, wenn ich immer noch auf dem Schlauch stehe. Aber inwiefern soll mir getElementsByAttribute denn weiterhelfen?

Das Problem, ich habe ein XML Dokument in dem das Element 'farbe' vorkomment, welches ein Attribut 'select' mit Farbwerte ausweisst. Die moeglichen Werte fuer das Attribute sind mir aber nicht vorher bekannt. Jetzt will ich ueber DOM eben eine Liste aller vorhandenen Farbwerte im Attributes erhalten, also klassisch gruppieren aller 'farbe' elemente nach dem Attributeinhalt.

Waere dankbar fuer Erleuchtung ;-)

Steffen

Hi,

Kennt jemand eine gute Seite wo man entsprechende Methoden nachlesen kann.

http://jacksleight.com/old/blog/2008/01/14/getelementsby/

Wuede mir es ja gerne anlesen, aber ich finde nicht die richtigen Seite hierfuer

Eine Suche nach *getElementsByAttribute JavaScript* sollte wohl schon hinreichend sein. Ob man so etwas programmieren kann, wenn man es noch nicht mal suchen kann, sei natürlich dahingestellt ... >;->

Gruß, Cybaer

[Cybaer]

Hi,

Verzeih, wenn ich immer noch auf dem Schlauch stehe. Aber inwiefern soll mir getElementsByAttribute denn weiterhelfen?

Als Anregung, wie man das macht - sofern die Funktion nicht ohnehin auch bei XML funktioniert?

Jetzt will ich ueber DOM eben eine Liste aller vorhandenen Farbwerte im Attributes erhalten, also klassisch gruppieren aller 'farbe' elemente nach dem Attributeinhalt.

Und wo ist jetzt konkret das Problem? Mit getElementsByTagName() und getAttribute() durchgucken und fertig ...

Waere dankbar fuer Erleuchtung ;-)

Die Sonne scheint - das muß reichen! ;-)

Gruß, Cy-"gleich am See"-baer

[globe]

n'abend,

var farbListe = document.getElementsByTagName('farbe');
???
var farbListeGroupiert = ????

was spricht gegen eine HashMap?

  
var groups = {}  
var items = document.getElementsByTagName( 'farbe' );  
for( var i=0, item; item = items[0]; i++ )  
{  
  var t = item.getAttribute( 'auswahl' );  
  if( typeof( groups[ t ] ) == 'undefined' )  
    groups[ t ] = [];  
  
  groups[ t ].push( item );  
}

weiterhin schönen abend...

[Steffen]

Viele Dank fuer die Antwort. So etwas wie HashMap ist mir nicht bekannt (komme aus der XSL ecke). Aber das siehst zumindest schon verstaendlich aus. Darf ich kurz eine paar Fragen zum code Beispiel stellen, siehe kommentar

  
var groups = {};  
var items = document.getElementsByTagName( 'farbe' );  
// muesste hier nicht item = items[i] stehen? oder was macht die for anweisung?  
for( var i=0, item; item = items[0]; i++ ) {  
   var t = item.getAttribute( 'auswahl' );  
   // ist das eine if/ else anweisung?  
   if( typeof( groups[ t ] ) == 'undefined' ) {  
    groups[ t ] = [];  
   } else {  
   groups[ t ].push( item );  
   }  
}  

[globe]

n'abend,

Viele Dank fuer die Antwort. So etwas wie HashMap ist mir nicht bekannt (komme aus der XSL ecke). Aber das siehst zumindest schon verstaendlich aus. Darf ich kurz eine paar Fragen zum code Beispiel stellen, siehe kommentar

var items = document.getElementsByTagName( 'farbe' );
// muesste hier nicht item = items[i] stehen? oder was macht die for anweisung?

  
~~~javascript
  
var items = document.getElementsByTagName( 'farbe' );  
for( var i=0, item; item = items[i]; i++ )  
{  
  alert( item.nodeName );  
}

entspricht

  
var items = document.getElementsByTagName( 'farbe' );  
for( var i=0; i < items.length; i++ )  
{  
  var item = items[i];  
  alert( item.nodeName );  
}

nur dass die erste Variante kürzer und Verständlicher ist.
Ich war der Meinung mal etwas von molily in einem Artikel darüber gelesen zu haben. Ich konnte den Artikel aber leider nicht finden. Vielleicht war's auch eine Diskussion in #selfhtml? Weiß jemand wovon ich spreche und kann das Verlinken?

// ist das eine if/ else anweisung?
   if( typeof( groups[ t ] ) == 'undefined' ) {
    groups[ t ] = [];
   } else {
   groups[ t ].push( item );
   }

  
Ja, das ist ein If-Else-Block (conditional block). Dieses Stück Code verhält sich jedoch nicht ganz so, wie du das vermutest. In normaler Sprache passiert hier:  
  
WENN groups[t] undefiniert ist,  
DANN definiere groups[t] als Array,  
SONST füge item in das Array groups[t] ein.  
  
Falls du es noch immer nicht siehst: Wenn groups[t] noch kein Array war, wird es zum Array - aber item wird dem Array NICHT hinzugefügt.  
  
Wenn du das item bereits beim Initialisieren des Arrays hinzufügst, tritt der Fehler nicht auf:  
  
~~~javascript
if( typeof( groups[ t ] ) == 'undefined' ) {  
  groups[ t ] = [ item ];  
} else {  
  groups[ t ].push( item );  
}

Das ist äquivalent zu

if( typeof( groups[ t ] ) == 'undefined' ) {  
  groups[ t ] = [];  
}  
  
groups[ t ].push( item );

weiterhin schönen abend...

[molily]

var items = document.getElementsByTagName( 'farbe' );
for( var i=0, item; item = items[i]; i++ )

nur dass die erste Variante kürzer und Verständlicher ist.
Ich war der Meinung mal etwas von molily in einem Artikel darüber gelesen zu haben.

Dazu habe ich höchstens hier im Forum mal etwas geschrieben:
http://forum.de.selfhtml.org/archiv/2008/7/t173640/#m1140528

Mathias

[Steffen]

Besten Dank, fuer die gute Erklaerung!

hat geholfen, die grauen Zellen in Bewegung zu setzen.

Steffen