Alternative all'utilizzo delle proprietà Id / Name con elementi non input in HTML

Question

Alternative all'utilizzo delle proprietà Id / Name con elementi non input in HTML

#1 da (1 voti)
#2 da (1 voti)

0

Sto migrando un sito Web che utilizza Javacsript / HTML / PHP utilizzando codice javascript riutilizzabile, in alcuni momenti ho visto l'opportunità di semplificare il codice in funzioni che utilizzano quasi lo stesso codice.

Diciamo : Voglio visualizzare i valori dal database in vari <span> o <div> elementi usando AJAX. tutti gli elementi di riferimento utilizzano lo stesso layout per visualizzare i dati, la differenza si trova solo nell'ID dell'elemento o una procedura minima per convalidare i dati. Questo è tutto.

Tuttavia, sono arrivato rapidamente alla conclusione che non ho un modo per riferire un elemento specifico in HTML senza utilizzare la proprietà id e l'unica alternativa che penso fosse l'uso della proprietà name . So che questa proprietà è solo per <input> in <form> , e poiché questi elementi non sono <input> questa regola non applica ( so che in HTML le regole non sono applicati ).

L'idea di base è smettere di usare id s per rendere il mio codice più riutilizzabile.

Per passare da questo:

<div id='sGroupName1'>
  +---<div id='elementA1'>
  |     +---<span id='txtA1'>
  +---<div id='elementB1'>
        +---<span id='txtB1'>

<div id='sGroupName2'>
  +---<div id='elementA2'>
  |     +---<span id='txtA2'>
  +---<div id='elementB2'>
        +---<span id='txtB2'>

a questo:

<div id='sGroupName1'>
  +---<div name='elementA'>
  |     +---<span name='txtA'>
  +---<div name='elementB'>
        +---<span name='txtB'>

<div id='sGroupName2'>
  +---<div name='elementA'>
  |     +---<span name='txtA'>
  +---<div name='elementB'>
        +---<span name='txtB'>

Facendo il mio codice in questo modo, penso che infrangerà le regole di conformità HTML5. So che questo non è un problema per sé , perché ho risolto in modo non ortodosso, ma voglio sentire qual è il modo migliore per affrontare queste situazioni.

So che esiste una domanda relativa HTML - Alternativa per l'ID quando l'ID è solo univoco all'interno di un certo ambito? ma in questo caso non voglio occuparmi di classi e regole CSS perché la pagina corrente usa un sacco di CSS e ci sono molte funzioni Javascript nella pagina che manipolano la classe CSS, usando Class come tipo di identificatore, penso che porterebbe a qualche bug (ma non così sicuro).

html programming-practices javascript

posta Rafael 05.08.2014 - 19:35

fonte

2 risposte

1

Oltre agli attributi di classe che sono già stati suggeriti, potresti essere interessato agli attributi di data-* . Quelli sono ciò che vuoi che siano. Non ci sono molte regole da rispettare. Controlla questo per i dettagli: Documentazione MDN

<div id='sGroupName1'>
  <div data-my-own-whatever='elementA'>
       <span data-my-own-whatever='txtA'>
  <div data-my-own-whatever='elementB'>
        <span data-my-own-whatever='txtB'>

<div id='sGroupName2'>
  <div data-my-own-whatever='elementA'>
       <span data-my-own-whatever='txtA'>
  <div data-my-own-whatever='elementB'>
        <span data-my-own-whatever='txtB'>

La maggior parte dei framework ti consente di accedere al tuo nodo dom con un selettore simile a CSS, ad esempio: #sGroupName2 [data-my-own-whatever="txtB"] .

Spero che questo aiuti.

risposta data 05.08.2014 - 22:27

fonte

Leggi altre domande sui tag html programming-practices javascript

La mia 'area di memorizzazione delle variabili' è fondamentalmente un 'heap'? Memorizzazione e accesso alle impostazioni dalla query del database

score 1 · Accepted Answer

Se per qualche motivo i selettori padre / figlio non funzioneranno come GrandmasterB suggerisce un'altra idea che non viola gli standard HTML è di usare le classi CSS per marcare i tuoi elementi.

<div id='sGroupName1'>
  +---<div class='boxy elementA'>
  |     +---<span class='txtA'>
  +---<div class='boxy elementB'>
        +---<span class='txtB'>

<div id='sGroupName2'>
  +---<div class='boxy elementA'>
  |     +---<span class='txtA'>
  +---<div class='boxy elementB'>
        +---<span class='txtB'>

Dato che puoi raggruppare le classi puoi farlo senza interferire con il layout visivo. In effetti, questa era una tradizione consolidata nel tempo tra gli sviluppatori ASP.NET ai tempi dei moduli Web quando non si aveva il controllo degli ID elemento.

Sospetto anche che le ricerche per nome di classe riguardino il 3 ° DOM più veloce dopo l'ID e il nome del tag, dato che in questi giorni è davvero necessario ottimizzare per il rendimento di CSS e jQuery.