JavaScript Zwei document.getElementsByClassName in einem Objekt

[S.Kara]

Beispiel:

var a = document.getElementsByClassName('a');
var b = document.getElementsByClassName('b');

Wie schaffe ich es jetzt a und b sagen wir mal in Objekt c unterzubringen?

Bei

var c = a.concat(b);

bekomme ich den Fehler, dass concat keine Funktion von a sei.

Bei

var c = a + b;

sind wohl irgendwie die "[" "]" von a und b mit drin, so dass ich nicht mehr gut drüber iterieren kann, da diese Klammern ja keine Objekte von meiner Seite sind.


Ich bin mit meinem Latein am Ende, wäre daher für Hilfe sehr dankbar.

 

[blablub1212]

Probier mal folgendes: http://stackoverflow.com/a/171256
http://stackoverflow.com/a/171455

Trifft es zwar nicht ganz aber sollte dir weiterhelfen.

 

[jurrasstoil]

Was genau hast du denn vor mit der Kombination der beiden ausgewählten Elemente?

 

[S.Kara]

Ah, mittels Schleife dranhängen. Ist vielleicht nicht die feine englische art, sollte aber funktionieren.
Danke.

Was genau hast du denn vor mit der Kombination der beiden ausgewählten Elemente?

Mal gucken was so möglich ist, Style und so.
Bin nur am Lernen und Ausprobieren.

Will halt später mit einer Schleife durchgehen, wenn ich da dann haufenweise ifs reinhaue wäre das nicht wirklich übersichtlich.

 

[jurrasstoil]

Soll das der Übersicht im Code dienen? Also willst du die Klassen 'a' und 'b' in einer NodeList 'c' unterbringen, damit du nicht z.bsp. a.style.wasauchimmer = blub und b.style.wasauchimmer = blub schreiben musst, sondern einfach mit c.style.wasauchimmer = blub es bei beiden änderst?


Das Ergebnis von GetElementsByClassName gibt dir eine NodeList und die ist kein Array und hat keine Methode concat(), sondern ausschließlich die Methode item(). Wenn du also zwei NodeLists zusammenfummeln willst, dann musst du sie in ein Array umwandeln und dann per concat() zusammenfügen. Sollte das für dein Projekt wirklich nötig sein, dann ist jQuery wahrscheinlich einfacher, damit lassen sich mehrere Elemente recht einfach auswählen und verarbeiten.

http://stackoverflow.com/questions/2430121/javascript-concatenate-multiple-nodelists-together

 

[T0a5tbr0t]

Ist ein lange bekanntes Problem, dass NodeList keine richtige js Array ist (bzw. Array nicht erweitert). Können Browser leider auch nicht ändern, da zu viel Code davon abhängt.

var array = Array.prototype.slice.call(arrayLike);

Ist ein netter Trick, da die Array-Methoden praktisch alles verarbeiten können, was eine "length" Eigenschaft hat. So kann man sich eine manuelle for-Schleife sparen.
In aktuellen Browsern geht auch folgendes

var array = Array.from(arrayLike);
// oder
var array = [...arrayLike, ...nochEineList];

Letzteres ist der Spread operator.
Der geht aber nur in neuen Browsern und der alte slice Trick ist vermutlich noch am schnellsten, da gut optimiert in den js VM's.

 

[S.Kara]

Soll das der Übersicht im Code dienen? Also willst du die Klassen 'a' und 'b' in einer NodeList 'c' unterbringen, damit du nicht z.bsp. a.style.wasauchimmer = blub und b.style.wasauchimmer = blub schreiben musst, sondern einfach mit c.style.wasauchimmer = blub es bei beiden änderst?

Ja genau.
Bei zweien ginge das ja noch, aber es kann ja sein dass es auch mal mehr werden.

Das Ergebnis von GetElementsByClassName gibt dir eine NodeList und die ist kein Array und hat keine Methode concat(), sondern ausschließlich die Methode item(). Wenn du also zwei NodeLists zusammenfummeln willst, dann musst du sie in ein Array umwandeln und dann per concat() zusammenfügen. Sollte das für dein Projekt wirklich nötig sein, dann ist jQuery wahrscheinlich einfacher, damit lassen sich mehrere Elemente recht einfach auswählen und verarbeiten.

http://stackoverflow.com/questions/2430121/javascript-concatenate-multiple-nodelists-together

Ah interessant, dachte immer dass das ein einfaches Array ist. Danke für den Hinweis, jetzt macht das alles auch wieder Sinn.


@T0a5tbr0t
Ja die erste Methode habe ich jetzt auch verwendet, klappt wunderbar. ^^