Best Practice jQuery -> DOM Elemente Ansprechen

da.eXecutoR · 07.01.2011, 11:24

Hallo Jungs und ein frohes 2011!

Wünsche allen beruflich wie auch privat Glück und Gesundheit!

Ich hab da ne kurze Frage. Grundsätzlich ist es ja performanter man spricht Elemente im DOM mit der ID an, anstatt des Klassen Selektors. Nun hab ich in meiner Anwendung eine vielzahl von Elementen welche als ID die ID der Datenbank erhalten. Dies macht es extrem einfach die Werte via Ajax zum Beispiel mit Formular Daten zu versenden oder auch wenn man einfach Daten abfragen will.

Mal davon abgesehen dass es nach dem W3C verboten ist die gleiche ID mehrmals zu vergeben, kann es trotzdem vorkommen dass auf einer Seite zwei Listen ausgegeben werden, wo Daten aus verschiedenen Tabellen der Datenbank ausgegeben werden, womit natürlich dann auch doppelte IDs vorkommen können.

Meine Frage dazu, soll ich nun weiterhin als ID die ID des Datensatzes aus der Datenbank verwenden, und beim selektieren der DOM Elemente hald mit ID + Klassen Typ vorgehen um die doppelten Elemente zu verhindern, oder gar auf das ID Attribut verzichten, oder das ID Attribut mit dem ID Wert der Datenbank einfach um einen Kennzeichner erweitern?

Hier mal ein Beispiel für den Fall dass meine Ausführungen unklar sein sollten

Zur Zeit kann es sein dass ich zwei seperate Listen habe, mit Dokumenten und Nachrichten zum Beispiel, wo dann zwei Divs vorkommen mit der gleichen ID:

Code:

<div id="34" class="docList">
   Mein erstes Dokument
</div>

<div id="34" class"msgList">
   Meine erste Nachricht
</div>

Dadurch funktionieren dann meine jQuery Scripts natürlich nicht mehr wenn ich zum Beispiel nach einer Funktion welche durch

Code:

$(".docList").click(function(){
$.(ajax{
 url: "daten.php",
 typ: "POST",
 data: "docID=" + $(this).atr("id")
 success: function(html){
    $("#" + $(this).atr("id").html(html);
})
});

Daten zurück geschrieben werden, da ja das DIV mit dieser ID zweimal existiert.

So wie ich das sehe habe ich nun folgende Möglichkeiten das Problem aus der Welt zu schaffen:

Code:

<div id="34-doc" class="docList">
   Mein erstes Dokument
</div>

<div id="34-msg" class"msgList">
   Meine erste Nachricht
</div>

Und dann jeweils die id mit javascript parsen damit ich nur noch die ID erhalte und diese via ajax senden oder:

Code:

<div id="34" class="docList">
   Mein erstes Dokument
</div>

<div id="34" class"msgList">
   Meine erste Nachricht
</div>

Und beim zurückschreiben hald das Div nicht nur mit dem ID Selektor ansprechen sonder kombiniert mit:

Code:

$("#34 .docList").html(html);

Was würdet ihr empfehlen? Wie löst Ihr dieses Problem? Jedes mal ein verstecktes Input Feld hinterlegen wo die ID des Datensatzes liegt scheint mir auch nicht die richtige Lösung zu sein.

Performance sowie korrekte Verwendung von jquery währen gewünscht.

vielen Dank für eure Erfahrungen!

BlackScorp · 07.01.2011, 11:28

http://api.jquery.com/data/

http://ejohn.org/blog/html-5-data-attributes/

MFG

da.eXecutoR · 07.01.2011, 11:39

Hey BlackScorp!

Vielen Dank für die beiden Links. Ist ja ein cooles Feature. Wenn ich das richtig verstanden habe kann ich also gleich vorgehen mit dem Unterschied dass ich statt id="34" z.Bsp. data-ID="34" verwende, oder?

Nur ist das gleich performant wie wenn ich Elemente mit einer ID anspreche?

Ansonsten wäre ja die Variante die ID "unique" zu gestalten mit einer Erweiterung die bessere Lösung.

Oder wie siehst du das?

Grüsse

Stefan

BlackScorp · 07.01.2011, 12:00

also ich kann dir zu der perfomance ncihts sagen , ich denke du müsstest es einfahc mal ausprobieren aber spürbare unterschiede wirste sicherlich nicht sehen und W3C validator würde auch nicht meckern

einfach mal ausprobieren und mal berichten was du festgestellt hast, habe dieses feature selbst noch nie benutzt aber werde es noch tun.

Und ja, statt id, trägst du ein data-ID und statt
$("#34") , musste es mit $("div").data("ID") == "34" abfragen und die ID setzt du mit $("div").data("ID","34");
MFG

rudygotya · 07.01.2011, 16:27

Der class-Selektor wär mMn. wesentlich performanter als der Zwischenschritt mit data(). Abgesehen davon kannst du dann trotzdem doppelte data-ids haben. Oder ist das kein Problem?

Verstehe auch nicht, wieso da kein prefix vor der ID hängt. Wieviel schneller der id-Selektor ist, hängt auch stark vom Browser ab.

siehe auch hier

Kannste dir auch mal umbauen, wäre interessant zu wissen, wie viel schneller der ID-Selektor gegen den Class-Selektor im IE 8/9 ist.

nikosch · 07.01.2011, 17:02

Unabhängig von Performance-Fragen darfst Du niemals doppelte IDs in HTML verwenden. Das widerspricht der Spezifikation. Dass Javascript überhaupt damit läuft ist somit nicht garantiert.

BlackScorp · 07.01.2011, 17:07

ich glaube wenn in divs data-id="34" steht, ist es w3c valide da ja dieses data nur auf den div bezieht

nikosch · 08.01.2011, 01:58

Ich rede auch von id, nicht von data-id. data-id ist aber erst aber html5 ein valides Attribut.

litterauspirna · 08.01.2011, 13:20

Ich glaube im XHMTL ist eine rein numerische ID nicht valide und eine gleichnamige ID schon gar nicht.

Da ich mit meiner Chefin im Praktikum auch eine ähnliche, eigentlich die gleiche Diskussion hatte ist es performanter sich gewisse Elemente mit getElementsByTagName in ein Array zu schreiben und anhand des class Attributes anzusprechen. Weil wenn man mit getElementById arbeitet hangelt er sich durch alle Dokumentebenen und sucht nach der passenden ID und das kann bei einer großen Dokumentstruktur und vielen verschachtelungen schon etwas Zeit in anspruch nehmen. Während bei der anderen Methode alle Elemente mit dem Tag ausgelesen werden und dann nur nach dem class Attribut aussortiert werden und im Gegensatz zum ID Attribut hat class den Vorteil das eine class beliebig oft im Dokument verwand werden darf.

Ich hoffe ich habe mit meiner Aussage recht, dass ist zumindest das was mir meine Chefin dazu erklärt hat.

Gruß Litter

rudygotya · 08.01.2011, 16:12

@ litter: das kommt erstmal auf den Browser an und läßt sich spontan nicht beantworten, ohne den Fall genauer zu beschreiben.

Ich würd generell aber davon ausgehen, dass bei neueren Browsern getElementByID am schnellsten ist.
http://www.uize.com/tests/performanc...ntsByName.html
-> 40.000 mal getElementByID

FF 3.6: 65ms
Chromium 10: 20ms,

IE8 : 921ms
IE6 : 11376ms

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Quelltext einer bestehenden Anwendung kürzen - Best Practice?	jesuspresley	PHP Einsteiger	3	22.02.2011 12:18
Best Practice: Datenbankabfragen	tarian	Software-Design	21	21.01.2011 21:52
best practice bei Sprachvar. in JS	cycap	Software-Design	18	25.11.2010 18:38
[Erledigt] Best Practice DB Verbindung	makebzimage	Software-Design	31	04.11.2010 14:04
best practice bei einbindung von JS / CSS files	cycap	Software-Design	27	26.10.2010 18:42
[Erledigt] Jquery div ansprechen	TZP	JavaScript, Ajax und mehr	4	15.10.2010 09:29
[Erledigt] Dynamische Elemente (createElement) per CSS ansprechen	Arne Drews	JavaScript, Ajax und mehr	6	01.09.2010 21:52
best practice - OOP Kern und Komponenten in Applikation wiederverwenden	Murdoc	PHP-Fortgeschrittene	22	23.08.2010 10:10
jQuery Bild in DIV ansprechen.	JanM	JavaScript, Ajax und mehr	2	14.06.2010 13:12
Tutorial / Best Practice für kl. Windows Server Cluster	Plague	Server, Hosting und Workstations	1	01.04.2010 22:49

07.01.2011, 11:24
da.eXecutoR Erfahrener Benutzer Registriert seit: 08.08.2009 Beiträge: 195 PHP-Kenntnisse: Fortgeschritten	Best Practice jQuery -> DOM Elemente Ansprechen Hallo Jungs und ein frohes 2011! Wünsche allen beruflich wie auch privat Glück und Gesundheit! Ich hab da ne kurze Frage. Grundsätzlich ist es ja performanter man spricht Elemente im DOM mit der ID an, anstatt des Klassen Selektors. Nun hab ich in meiner Anwendung eine vielzahl von Elementen welche als ID die ID der Datenbank erhalten. Dies macht es extrem einfach die Werte via Ajax zum Beispiel mit Formular Daten zu versenden oder auch wenn man einfach Daten abfragen will. Mal davon abgesehen dass es nach dem W3C verboten ist die gleiche ID mehrmals zu vergeben, kann es trotzdem vorkommen dass auf einer Seite zwei Listen ausgegeben werden, wo Daten aus verschiedenen Tabellen der Datenbank ausgegeben werden, womit natürlich dann auch doppelte IDs vorkommen können. Meine Frage dazu, soll ich nun weiterhin als ID die ID des Datensatzes aus der Datenbank verwenden, und beim selektieren der DOM Elemente hald mit ID + Klassen Typ vorgehen um die doppelten Elemente zu verhindern, oder gar auf das ID Attribut verzichten, oder das ID Attribut mit dem ID Wert der Datenbank einfach um einen Kennzeichner erweitern? Hier mal ein Beispiel für den Fall dass meine Ausführungen unklar sein sollten Zur Zeit kann es sein dass ich zwei seperate Listen habe, mit Dokumenten und Nachrichten zum Beispiel, wo dann zwei Divs vorkommen mit der gleichen ID: Code: <div id="34" class="docList"> Mein erstes Dokument </div> <div id="34" class"msgList"> Meine erste Nachricht </div> Dadurch funktionieren dann meine jQuery Scripts natürlich nicht mehr wenn ich zum Beispiel nach einer Funktion welche durch Code: $(".docList").click(function(){ $.(ajax{ url: "daten.php", typ: "POST", data: "docID=" + $(this).atr("id") success: function(html){ $("#" + $(this).atr("id").html(html); }) }); Daten zurück geschrieben werden, da ja das DIV mit dieser ID zweimal existiert. So wie ich das sehe habe ich nun folgende Möglichkeiten das Problem aus der Welt zu schaffen: Code: <div id="34-doc" class="docList"> Mein erstes Dokument </div> <div id="34-msg" class"msgList"> Meine erste Nachricht </div> Und dann jeweils die id mit javascript parsen damit ich nur noch die ID erhalte und diese via ajax senden oder: Code: <div id="34" class="docList"> Mein erstes Dokument </div> <div id="34" class"msgList"> Meine erste Nachricht </div> Und beim zurückschreiben hald das Div nicht nur mit dem ID Selektor ansprechen sonder kombiniert mit: Code: $("#34 .docList").html(html); Was würdet ihr empfehlen? Wie löst Ihr dieses Problem? Jedes mal ein verstecktes Input Feld hinterlegen wo die ID des Datensatzes liegt scheint mir auch nicht die richtige Lösung zu sein. Performance sowie korrekte Verwendung von jquery währen gewünscht. vielen Dank für eure Erfahrungen! __________________ It's not a bug. It's a feature!


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

07.01.2011, 11:28
BlackScorp Erfahrener Benutzer Registriert seit: 25.09.2009 Beiträge: 2.114 PHP-Kenntnisse: Fortgeschritten	http://api.jquery.com/data/ http://ejohn.org/blog/html-5-data-attributes/ MFG __________________ Mein kleines Projekt -Cruel Online- 5 von 3 Leuten können kein Bruchrechnen

07.01.2011, 11:39
da.eXecutoR Erfahrener Benutzer Registriert seit: 08.08.2009 Beiträge: 195 PHP-Kenntnisse: Fortgeschritten	Hey BlackScorp! Vielen Dank für die beiden Links. Ist ja ein cooles Feature. Wenn ich das richtig verstanden habe kann ich also gleich vorgehen mit dem Unterschied dass ich statt id="34" z.Bsp. data-ID="34" verwende, oder? Nur ist das gleich performant wie wenn ich Elemente mit einer ID anspreche? Ansonsten wäre ja die Variante die ID "unique" zu gestalten mit einer Erweiterung die bessere Lösung. Oder wie siehst du das? Grüsse Stefan __________________ It's not a bug. It's a feature!

07.01.2011, 12:00
BlackScorp Erfahrener Benutzer Registriert seit: 25.09.2009 Beiträge: 2.114 PHP-Kenntnisse: Fortgeschritten	also ich kann dir zu der perfomance ncihts sagen , ich denke du müsstest es einfahc mal ausprobieren aber spürbare unterschiede wirste sicherlich nicht sehen und W3C validator würde auch nicht meckern einfach mal ausprobieren und mal berichten was du festgestellt hast, habe dieses feature selbst noch nie benutzt aber werde es noch tun. Und ja, statt id, trägst du ein data-ID und statt $("#34") , musste es mit $("div").data("ID") == "34" abfragen und die ID setzt du mit $("div").data("ID","34"); MFG __________________ Mein kleines Projekt -Cruel Online- 5 von 3 Leuten können kein Bruchrechnen

07.01.2011, 16:27
rudygotya Erfahrener Benutzer Registriert seit: 28.05.2008 Beiträge: 2.094 PHP-Kenntnisse: Fortgeschritten	Der class-Selektor wär mMn. wesentlich performanter als der Zwischenschritt mit data(). Abgesehen davon kannst du dann trotzdem doppelte data-ids haben. Oder ist das kein Problem? Verstehe auch nicht, wieso da kein prefix vor der ID hängt. Wieviel schneller der id-Selektor ist, hängt auch stark vom Browser ab. siehe auch hier Kannste dir auch mal umbauen, wäre interessant zu wissen, wie viel schneller der ID-Selektor gegen den Class-Selektor im IE 8/9 ist. __________________ ++++ Wieder einer ins Netz gegangen: Phishers Fritz zufrieden ++++ Blog

07.01.2011, 17:02
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Unabhängig von Performance-Fragen darfst Du niemals doppelte IDs in HTML verwenden. Das widerspricht der Spezifikation. Dass Javascript überhaupt damit läuft ist somit nicht garantiert. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

07.01.2011, 17:07
BlackScorp Erfahrener Benutzer Registriert seit: 25.09.2009 Beiträge: 2.114 PHP-Kenntnisse: Fortgeschritten	ich glaube wenn in divs data-id="34" steht, ist es w3c valide da ja dieses data nur auf den div bezieht __________________ Mein kleines Projekt -Cruel Online- 5 von 3 Leuten können kein Bruchrechnen

08.01.2011, 01:58
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Ich rede auch von id, nicht von data-id. data-id ist aber erst aber html5 ein valides Attribut. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

08.01.2011, 13:20
litterauspirna Erfahrener Benutzer Registriert seit: 24.04.2008 Beiträge: 3.172 PHP-Kenntnisse: Anfänger	Ich glaube im XHMTL ist eine rein numerische ID nicht valide und eine gleichnamige ID schon gar nicht. Da ich mit meiner Chefin im Praktikum auch eine ähnliche, eigentlich die gleiche Diskussion hatte ist es performanter sich gewisse Elemente mit getElementsByTagName in ein Array zu schreiben und anhand des class Attributes anzusprechen. Weil wenn man mit getElementById arbeitet hangelt er sich durch alle Dokumentebenen und sucht nach der passenden ID und das kann bei einer großen Dokumentstruktur und vielen verschachtelungen schon etwas Zeit in anspruch nehmen. Während bei der anderen Methode alle Elemente mit dem Tag ausgelesen werden und dann nur nach dem class Attribut aussortiert werden und im Gegensatz zum ID Attribut hat class den Vorteil das eine class beliebig oft im Dokument verwand werden darf. Ich hoffe ich habe mit meiner Aussage recht, dass ist zumindest das was mir meine Chefin dazu erklärt hat. Gruß Litter __________________ Aus dem Dynamo Lande kommen wir. Trinken immer reichlich kühles Bier. Und dann sind wir alle voll, die Stimmung ist so toll. Aus dem Dynamo Lande kommen wir. http://www.lit-web.de

08.01.2011, 16:12
rudygotya Erfahrener Benutzer Registriert seit: 28.05.2008 Beiträge: 2.094 PHP-Kenntnisse: Fortgeschritten	@ litter: das kommt erstmal auf den Browser an und läßt sich spontan nicht beantworten, ohne den Fall genauer zu beschreiben. Ich würd generell aber davon ausgehen, dass bei neueren Browsern getElementByID am schnellsten ist. http://www.uize.com/tests/performanc...ntsByName.html -> 40.000 mal getElementByID FF 3.6: 65ms Chromium 10: 20ms, IE8 : 921ms IE6 : 11376ms __________________ ++++ Wieder einer ins Netz gegangen: Phishers Fritz zufrieden ++++ Blog