querySelectorAll 是不是支持 id 中的句点（.）字符？

Posted 2023-05-09

【中文标题】querySelectorAll 是不是支持 id 中的句点（.）字符？

【英文标题】：Does querySelectorAll support the period(.) character in an id?querySelectorAll 是否支持 id 中的句点（.）字符？

【发布时间】：2013-07-07 22:46:57

【问题描述】：

querySelectorAll 是否支持 id 中的句点（.）字符？

我的意思是，如果我添加如下元素：

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

然后我使用 querySelectorAll 如下：

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

那我什么都得不到！

所以句号是id的合法字符，querySelectorAll是Firefox官方提供的方法；我不敢相信该方法不支持 id 中的句点（。）。我是不是搞错了？

【参考方案1】：

你需要记住.代表一个类选择器，所以选择器#my.divid代表一个ID为my的元素和一个类divid，不是一个带有编号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

【讨论】：

在其他地方，这个：newName = CSS.escape("name.dot") 返回 'name\\.dot'。感谢 Mathias Bynens 在***.com/questions/19702301/…

的指出

【参考方案2】：

querySelectorAll 中的句点表示您正在指定一个 css 类。在您的情况下，querySelectorAll 试图找出一个带有 id “my” 并且具有 css 类“divid”的 DOM 元素。 querySelectorAll 怎么会知道这次你想要的是 id 而不是 class 的元素？由您决定是否拥有适当的id 属性，以免混淆该方法。虽然允许使用句点，但最好的做法是在大多数情况下避免使用它，以免混淆 jquery 等其他库。

【讨论】：

也就是说querySelectorAll不支持id属性中的句点？如果要在id中插入句点，通过querySelectorAll获取不到，还是必须将id中的句点(.)改为反斜杠和句点(\.)，对吗？

您必须使用“\\.”我想是为了逃避它。

@user215536​​2：您一定错过了我在您发表评论前 10 分钟基本上解释了您提出的所有问题的回答。

我验证了双反斜杠 \\ 有效。 querySelector("#abc\\.test");