Does querySelectorAll supporta il periodo di caratteri (.) Nell'id?

Question

Does querySelectorAll supporta il periodo di caratteri (.) Nell'id?

Voglio dire, se aggiungo un elemento come di seguito:

var div = document.createElement('div'); 
div.id='my.divid'; 
document.body.appendChild(div); 

e poi io uso querySelectorAll come di seguito:

document.querySelectorAll('#my.divid'); 

Non ho niente!

Quindi periodo è il carattere legale per id e querySelectorAll è il metodo ufficiale fornito da firefox, non riesco a credere che il metodo non supporti il ​​punto (.) Nell'ID. Ho fatto qualche errore?

Grazie!

Answer 1

Un periodo in querySelectorAll significa che si specifica una classe css. Nel tuo caso querySelectorAll sta cercando di trovare un elemento DOM con "mio" e con una classe css "divid". In che modo querySelectorAll sai che questa volta vuoi elemento per id e non per classe? Spetta a te avere atrribute id corrette in modo da non confondere il metodo. Sebbene sia consentito un periodo, la migliore pratica è evitarla il più delle volte in modo da non confondere altre librerie come jquery ecc.

Answer 2

è necessario ricordare che . rappresenta un selettore di classe, in modo che il selettore di #my.divid rappresenta un elemento con l'ID my e una classe divid, non un elemento con l'ID my.divid. Quindi, l'elemento seguente sarebbe stato accompagnato da vostro selettore:

var div = document.createElement('div'); 
div.id = 'my'; 
div.className = 'divid'; 
document.body.appendChild(div); 

Se è necessario selezionare un elemento con l'ID my.divid come avete dato sopra, avete bisogno di sfuggire il periodo:

document.querySelectorAll('#my\\.divid'); 

Si noti che il doppio backslash è perché è una stringa selettore JS; in una regola CSS dovresti utilizzare una singola barra rovesciata: #my\.divid

Answer 3

Sono abbastanza sicuro che non è nemmeno legale in un ID. e in CSS, questo sarebbe interpretato come qualcosa del genere: <div id="my" class="divid"></div>. Non potresti mai farlo in quel modo. E poiché querySelectorAll utilizza lo stesso parser (penso), avrai gli stessi problemi.