Die magische select() Funktion!

Bei meinem vorherigen Post zum Zeilen-Duplizierer stand ich vor dem Problem, dass ich Elemente eines bestimmten Tags innerhalb eines ausgewählten DOM-Elements finden musste. Da ich hierfür in den Utility Methods nicht gefunden habe, musste ich die Funktion getElementsByTagName() verwenden. Alleine hiermit konnte ich aber noch immer nicht auf die Elemente zugreifen. Dazu musste ich den Aufruf noch mit der $A() Funktion verwenden. Der gesamte Aufruf für die drei Formularfelder sah dann wie folgt aus:

$A(newRow.getElementsByTagName('select')).invoke('clear');
$A(newRow.getElementsByTagName('textarea')).invoke('clear');
$A(newRow.getElementsByTagName('input')).each(function(elm){
	elm.clear().checked = '';
}); 

Heute bin ich durch Zufall dann auf die seit Prototype 1.6 neue Funktion select() gestoßen. Damit konnte ich in einem ersten Versuch die gleiche Selektion mit folgenden Zeilen nachbilden:

newRow.select('select').invoke('clear');
newRow.select('textarea').invoke('clear');
newRow.select('input')).each(function(elm){
	elm.clear().checked = '';
}); 

Aber selbst diese Vereinfachung ist noch zu umständlich. Die Funktion erlaubt das Selektrieren mit mehreren CSS-Selektoren. Dazu werden die CSS-Selektoren einfach als Parameter der Funktion übergeben:

newRow.select('select', 'textarea', 'input')).each(function(elm){
	elm.clear().checked = '';
}); 

Diese Vereinfachung ist zwar nicht ganz sinnvoll, da hier auch für Textfelder das “checked” Attribute geleert wird, aber es schadet auch an dieser Stelle nicht weiter.

Wie ihr also sehen könnt bietet die select() Funktion eine sehr einfache Selektion innerhalb eines bereits selektierten Elements. Zusätzlich zu der bereits beschriebenen Funktionalität erweitert die select() Funktion die Elemente zusätzlich noch mit der extend() Funktion um weitere Methoden. Sie einfacht also folgenden Aufruf auf lediglich einen Funktionsaufruf:

// gewöhnlicher Aufruf mit der getElementsByTagName() Funktion
$A(newRow.getElementsByTagName('input')).map(Element.extend);
// gleicher Aufruf mit Hilfe der select() Funktion
newRow.select('input');

Die select() Funktion ermöglicht also im Prinzip das Anwenden der $$() Funktion erweitert um das Zusammenfassen der Elemente in einem Array. Dadurch lässt sich beim Verarbeiten von selektierten Elementen einiges an Mehraufwand einsparen.

Veröffentlicht von

Bernhard ist fest angestellter Webentwickler, entwickelt in seiner Freizeit Plugin, schreibt in seinem Blog über WordPress und andere Themen, treibt sich gerne bei den WP Meetups in Berlin und Potsdam herum und läuft nach Feierabend den ein oder anderen Halbmarathon.

Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.