javascript - querySelectorAll 是否支持 id 中的句点 (.) 字符？

Question

querySelectorAll 是否支持 id 中的句点 (.) 字符？

我的意思是如果我附加如下元素:

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

然后我像下面这样使用 querySelectorAll:

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

那我什么也得不到!

所以句点是id的合法字符，querySelectorAll是Firefox官方提供的方法；我无法相信该方法不支持 id 中的句点 (.)。我是不是犯了什么错误？

Answer 1

你需要记住 . 代表一个类选择器，所以选择器 #my.divid 代表一个 ID 为 my 的元素， divid 类，不是 ID 为 my.divid 的元素。因此，您的选择器将匹配以下元素:

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

如果您需要选择 ID 为 my.divid 的元素，如您上面给出的那样，则需要转义句点:

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

请注意，双反斜杠是因为它是 JS 选择器字符串；在 CSS 规则中，您将使用单个反斜杠:#my\.divid