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而不是class？你应该有适当的id属性，以免混淆这种方法。虽然允许一段时间，但最好的做法是在大多数时间避免它，这样你就不会混淆jquery等其他库。

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

2 个答案: