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?

Oversexed

Answer 1

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.

Sensitize

So it means querySelectorAll does not support period in id attribute? If I want insert period in id, I can't get it by querySelectorAll, or I must change the period(.) in id to backslash and period(\.), is it right? – Oversexed

You'll have to use "\\." to escape it, I think. – Sensitize

@user2155362: You must have missed my upvoted answer where I explained basically everything you asked, 10 minutes before you posted your comment. – Zloty

I verified double backward slash \\ works .e.g. querySelector("#abc\\.test"); – Agave

Answer 2

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

Zloty

Elsewhere, this: newName = CSS.escape("name.dot") returns 'name\\.dot'. Thanks to Mathias Bynens for pointing it out at #19702801 – Rayleigh