Does querySelectorAll support the period(.) character in an id?

Question

Does querySelectorAll support the period(.) character in an id?

I mean if I append an element like below:

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

and then I use querySelectorAll like below:

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

then I get nothing!

So period is legal character for id, and querySelectorAll is the official method which Firefox provided; I can't believe the method doesn't support period(.) in id. Did I make some mistake?

Answer 1

You need to remember that . represents a class selector, so the selector #my.divid represents an element with the ID my and a class divid, not an element with the ID my.divid. So, the following element would be matched by your selector:

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

If you need to select an element with the ID my.divid as you have given above, you need to escape the period:

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

Note that the double backslash is because it's a JS selector string; in a CSS rule you would use a single backslash: #my\.divid

Answer 2

A period in querySelectorAll means you are specifying a css class. In your case querySelectorAll is trying to find out a DOM element with id "my" and having a css class "divid". How will querySelectorAll know that this time you want element by id and not by class? It is up to you to have proper id atrribute so as to no to confuse the method. Though a period is allowed, the best practise is to avoid it most of the time so that you do not confuse other libraries like jquery etc.