18

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

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

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

然后我使用 querySelectorAll 如下所示：

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

那我什么也得不到！

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

4

2 回答 2

32

你需要记住，它.代表一个类选择器，所以选择器#my.divid代表一个带有 IDmy和一个 class的元素divid，而不是一个带有 ID 的元素my.divid。因此，您的选择器将匹配以下元素：

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

如果您需要选择my.divid具有上面给出的 ID 的元素，则需要转义句点：

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

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

于 2013-07-10T05:53:05.013 回答
2

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

于 2013-07-10T05:54:01.620 回答