HTML: alternativa per l'ID quando l'ID è unico all'interno di un determinato ambito?

Il primo e il terzo presupposto sono solidi. Supposto medio "gli attributi di classe sono pensati per CSS e non dovrebbero essere usati nei selettori JS" è completamente, assolutamente sbagliato. Certo, c'è qualche purezza strutturale / di separazione delle preoccupazioni al riguardo. Ma rifiuta la realtà e la pratica comune di quasi tutte le modifiche dinamiche di JavaScript dei documenti HTML.

Se hai solo una cosa in una pagina e sai che non cambierà, l'attributo id funziona bene sia per CSS che per JS. Quando ci sono forse più di una cosa, l'attributo class è esattamente il posto in cui annotarlo. jQuery e tutte le altre moderne librerie "di alto livello JavaScript" inseriscono questo tipo di utilizzo direttamente nel loro codice, documentazione ed esempi, e chiunque utilizza i selettori di classe in questo modo.

Gli ID relativi non sono una parte standard di un linguaggio CSS o JS, e probabilmente non lo saranno mai. L'idea stessa suggerisce di prendere qualcosa che è assoluto e renderlo relativo. Data la disponibilità, il successo e l'ubiquità dei selettori di classe, quale sarebbe il punto? Se si desidera simulare questo tipo di accesso, definire selettori di classe univoci e quindi utilizzare la notazione relativa (ad es. Figlio, discendente o fratello adiacente) che è già parte e-pacco dell'uso di CSS e JS.

Hai ragione su Class attributes [were originally] meant for CSS , ma questo non significa necessariamente che non puoi anche usarli come hook JavaScript. (Ma è necessario prestare attenzione.)

In base alla specifica HTML4 ,

The class attribute has several roles in HTML:
    * As a style sheet selector (when an author wishes to assign style information to a set of elements).
    * For general purpose processing by user agents.

Questo non dice esplicitamente se class es debba essere usato come hook JS o meno (si tratta di "elaborazione generica"?).

Nella specifica HTML5 , tutta questa lingua relativa al ruolo di class es non è qui. Semplicemente afferma che la classe è "un insieme di token separati da spazi che rappresentano le varie classi a cui appartiene l'elemento". Quindi segnala che la classe può essere utilizzata come selettore JS utilizzando getElementsByClassName()

Detto questo ... Capisco la tua esitazione a usare l'attributo class per il duplice scopo di controllare stile e comportamento. Non è una buona cosa provare a cambiare il modo in cui appare la tua pagina, solo per capire che hai cambiato anche la sua funzionalità.

Per aggirare questo problema, ho visto un paio di soluzioni diverse.

(1) Assegna un nome al tuo hook JavaScript class es con un prefisso js-. Se lo fai, è chiaro quali classi sono intese come hook JS e quali no.

<input type="text" class="required js-typeahead" name="some-text" />

(2) Usa gli attributi data-* invece di class per gli hook JS. Questo ti dà anche l'ulteriore vantaggio di ottenere una coppia chiave-valore per il tuo codice JS.

<input type="text" class="required" data-typeahead="typeahead" name="some-text" />

Ovviamente, puoi utilizzare gli attributi di data-* per lo stile, quindi non devi necessariamente superare la separazione tra stile e comportamento.

#input[data-typeahead] {
    background-image:  url("typeahead.png");
    background-repeat: no-repeat;
}

Combina i due ID insieme, come in ID="WidgetID_RelativeID" Ciò garantirà univocità.

Nota: questa domanda potrebbe essere più adatta allo Stack Overflow piuttosto che ai programmatori.

Vorrei utilizzare .dataset ( MDN ) per archiviare locale ID. Vorrei accedervi utilizzando element.querySelector ( MDN ).

Esempio [1]:

<widget id="AwesomeWidget">
  <div data-ID="Sidebar"></div>
  <div data-ID="Toolbar"></div>
</widget>

e vorrei accedervi in Javascript usando il seguente approccio:

AwesomeWidget.querySelector("div[data-ID='Sidebar']");

[1]: HTML non valido: gli elementi personalizzati devono avere un - nei loro nomi, quindi x-widget è OK ma widget is not .