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

Answer 2

句点querySelectorAll表示您正在指定一个 css 类。在你的例子中querySelectorAll，试图找到一个带有id“my”并且有一个css类“divid”的DOM元素。如何querySelectorAll知道这次您想要的是按 id 而不是按类的元素？您需要拥有适当的id属性，以免混淆该方法。尽管允许使用句点，但最佳实践是在大多数情况下避免使用句点，这样您就不会混淆 jquery 等其他库。