JS und Selektoren: ID vs CLASS

[knuffiwuffi]

Hallo Community,

ich benötige mal einen Rat von euch. Mir ist der Unterschied zwischen ID und CLASS im HTML Markup bekannt. Folgende Situation:

Ich habe eigenständige Module (MVC) geschrieben, die per PHP Injection in meinen Seiten laufen. Jedes Modul bzw. der View hat einen Wrapper wie folgt

<div id="<?php echo $this->app_configuration["html_id"]; ?>" class="<?php echo $this->app_configuration["html_class"]; ?> app-text--default">
//
</div>

Nun gibt es Formularfelder oder auch Buttons, die ich derzeit über die ID in meinem JS Code anspreche. Aktuell habe ich den Fall, daß Buttons für Kommentarfelder in einer Schleife ausgegeben werden. Diese Buttons haben somit keine ID, sondern nur eine CLASS und Daten-Attribute, welche ich in meinem JS Code für den Selektor nutze:

                            <button class="app-list-item-video-comment__button-votes-positive app-button app-button--default app-button--style-transparent" data-video-comment-alias="<?php echo $video_comment["alias"]; ?>" title="">                    
                                <div class="app-button__icon">
                                    <i class="ri-thumb-up-line"></i>
                                </div>
                                <div class="app-button__number">
                                    <div class="app-button__number-votes-positive">
                                        <?php echo $video_comment["votes_positive"]; ?>
                                    </div>
                                </div>
                            </button>

Nun spiele ich mit der Idee, in meinen Modulen keine IDs (bis auf den Wrapper) zu verwenden und stattdessen nur mit Klassen zu arbeiten. Der HTML Code wäre etwas sauberer (spare mir ein PHP echo für ID-postfix) und die Arbeitsweise um eine Klasse per JS (JQuery) anzusprechen wäre konsistenter/einfacher:

$('#<?php echo $this->app_configuration["html_id"]; ?> .app-list-item-video-comment__button-votes-positive').click(function() {
// do something
}

$('#<?php echo $this->app_configuration["html_id"]; ?> .app-list-item-video-comment__button-votes-negative').click(function() {
// do something
}

Damit würde ich immer die richtige Klasse innerhalb eines Moduls ansprechen. Natürlich wären die Klassen Unique, sofern nicht als Schleife inkl. Daten-Attribut ausgegeben.

Eigentlich wiederspricht meine Denkweise dem Nutzen von IDs, da diese ja für den Unique Fall geschaffen wurden.

Dennoch finde ich die Lesbarkeit des Codes sehr viel einfacher.

Wie seht ihr den Fall?
Sollte ich mir das aus dem Kopf schlagen, oder wäre der Ansatz in Ordnung?

[tomBuilder]

ich verstehe deine sorgen und die vorteile nicht so ganz , meine allerdings, wenn du bei hunderten vorschaubildern von videos ein positiv oder negativ voten willst, geht das doch easy mit event delegation :
https://javascript.info/event-delegation
möglicherweis espart die das auch den inline js code ...

[knuffiwuffi]

Sorgen habe ich nicht. Ich versuche es mal mehr im Detail zu erklären.

Es geht mir um eine konsistente Schreibweise und Sauberkeit im Code.

Wenn ich buttons in einem Loop ausgebe, arbeite ich mit CLASS + Daten-Attribut (Beispiel 1).

Wenn es ein einzelner button ist, nutze ich aktuell noch IDs (Beispiel 2).

Würde ich ausschließlich mit CLASS arbeiten (Beispiel 1), wäre der Code sauberer und der JS Selektor ist für mich einfach zu erstellen und zu lesen.

// JS Selektor
$button_a = $('#<?php echo $this->app_configuration["html_id"]; ?> .app-unique-specific-button-a');
$button_b = $('#<?php echo $this->app_configuration["html_id"]; ?> .app-unique-specific-button-b');

Jedes Modul steht für sich (unabhängig von anderen Modulen) und ist meist einfach gestrickt (Ausgabe von z.B. einem Titel, einer Kommentarfunktion, von Bildern...).

Beispiel 1:

                            <button class="app-list-item-video-comment__button-votes-positive app-button app-button--default app-button--style-transparent"
                                data-video-comment-alias="<?php echo $video_comment["alias"]; ?>"
                                title="<?php echo $this->AppHelper->translation("APP_VIDEO_COMMENTS_BUTTON_VOTES_POSITIVE_FLAG_NULL_TITLE"); ?>">

                                <div class="app-button__icon">
                                    <i class="ri-thumb-up-line"></i>
                                </div>
                                <div class="app-button__number">
                                    <div class="app-button__number-votes-positive">
                                        <?php echo $video_comment["votes_positive"]; ?>
                                    </div>
                                </div>
                            </button>

<script type="text/javascript">
    $(document).ready(function() {
        $('#<?php echo $this->app_configuration["html_id"]; ?> .app-list-item-video-comment__button-votes-positive[data-video-comment-alias="23"]').click(function() {
            // do something
        }
    }

    });
</script>

Beispiel 2:

                            <button id="app-list-item-video-comment-button-votes-positive-<?php echo $this->app_configuration["html_id"]; ?>" class="app-list-item-video-comment__button-votes-positive app-button app-button--default app-button--style-transparent"
                                title="<?php echo $this->AppHelper->translation("APP_VIDEO_COMMENTS_BUTTON_VOTES_POSITIVE_FLAG_NULL_TITLE"); ?>">
                                <div class="app-button__icon">
                                    <i class="ri-thumb-up-line"></i>
                                </div>
                                <div class="app-button__number">
                                    <div class="app-button__number-votes-positive">
                                        <?php echo $video_comment["votes_positive"]; ?>
                                    </div>
                                </div>
                            </button>

<script type="text/javascript">
    $(document).ready(function() {
        $('#app-list-item-video-comment-button-votes-positive-<?php echo $this->app_configuration["html_id"]; ?>').click(function() {
            // do something
        }
    }

    });
</script>

[reddighamburg]

ID ist später im JS schneller, wegen der definierten Eindeutigkeit.

Ein Script braucht den Rest des Dokuments nicht mehr zu durchsuchen, wenn es den ersten Treffer gibt.

Bei class wird natürlich versucht, alle nodes zu finden.

Bei wenigen Elementen und / oder modernen Browsern dürfte das aber kaum ins Gewicht fallen.

[tomBuilder]

ohje performnce ....

https://measurethat.net/Benchmarks/S...vs-id-selector

ja der test ist 7 jahre alt ....

aber du meinst jetzt ernstaft, dass es sinn sich über performace gedanken zu machen,wenn man eine webseite mit quasi unzählig vielen (layiloading / scolling) vorschaubildern für irgendwelche videos durchsucht, nur um dann ein event dranzuhängen ?

bei dem ansatz in #2 fällt diese sorge komplett weg, und ich brauche keinen queryselector nur für ein event ....
aber TE bevorzugt seine herangehensweise - soll er.


class / id :

https://developer.mozilla.org/en-US/...d_ID_Selectors

[tomBuilder]

Ok...langsam habe ich einen Durchblick.

Damit mein Formular die richtige Kommentar-ID erhält, ohne, daß der User im Frontend die ID im Attribut ändern kann, muss ich sowohl .data("alias") als auch .attr("data-alias") per JQuery für das Element auf den neusten Stand bringen.

$('#<?php echo $this->app_configuration["html_id"]; ?>-button-form-create-save').attr('data-alias', data_alias).data('alias', data_alias);

Die ID wird dann per .data("alias") von dem jeweiligen Kommentar gezogen, sobald auf den Button "Antworten" gedrückt wird.

var data_alias = $button_clicked.data('alias'); 

Da muss man erst einmal drauf kommen. Sorry, sollte ich mich etwas kompliziert ausgedrückt habe. Bin in Sachen JQuery und JS noch nicht so lange dabei.

.
mir ist immer noch nicht klar was du da anstellst, der userkannalles wie er will im frontend ändern, und für das was du da vorhast ist nicht einmal eine ändrung im frontend nötig, sonder, siehe hier, noch ein wenig clicky.

natürlich könntest du daten für die verfofizierung des ricihigen arikels nutzen, welche nur der server kennt und welche gar nicht ins frontend übertartgaen werden, aber ich ah,lte das für sinnlos .

btw. ich würde mich auch gar nciht in jquery einlesen, javascipt reicht erstmal völlig aus, danach ein richtiges framework wie svelte, vue, angular oder was es sonst so gibt