Question

我在HTML中生成id的GUID，如

<div id="9121c01e-888c-4250-922f-cf20bcc7d63f">...</div>

根据HTML5规范，这是有效的。但是，如果您尝试使用document.querySelector或document.querySelectorAll查找此类元素，则会收到错误消息，指出选择器无效。

我知道对于CSS规则，这样的ID无效。 “document”的querySelector方法是否依赖于CSS？

Answer 1

querySelector方法是＆＃39;记录＆＃39;依靠CSS？

您传递的字符串querySelector和querySelectorAll是CSS选择器。所以是的，它们遵循CSS选择器的规则，其中一个（如你所提到的）是ID选择器不能以未转义的数字开头。所以他们不依赖CSS本身，但他们遵循CSS选择器的语法。

您可以通过转义第一个数字（这相当丑陋*）来选择该元素：

var e = document.querySelector("#\\39 121c01e-888c-4250-922f-cf20bcc7d63f");

...或使用属性选择器：

var e = document.querySelector("[id='121c01e-888c-4250-922f-cf20bcc7d63f']");

示例：

＆＃13;

document.querySelector("#\\39 121c01e-888c-4250-922f-cf20bcc7d63f").innerHTML = "Yes!";
document.querySelector("[id='9121c01e-888c-4250-922f-cf20bcc7d63f']").style.color = "green";

＆＃13;

<div id="9121c01e-888c-4250-922f-cf20bcc7d63f">...</div>

＆＃13;

当然，如果您 只是通过ID获取元素而不使用以ID开头的复合选择器，那么只需使用getElementById，而不是{＆1;}。使用CSS选择器，只使用ID值作为纯文本：

var e = document.getElementById("9121c01e-888c-4250-922f-cf20bcc7d63f");

如果您正在使用复合选择器（"#\\39 121c01e-888c-4250-922f-cf20bcc7d63f > span a"），或者将选择器字符串传递给您无法控制的内容，那么您只需要另一种形式，您知道将使用{{ 1}}。

*在CSS选择器中，querySelector后跟最多六个十六进制字符（如果您不使用全部六个字符，则加一个空格）指定十六进制的字符代码。 \是数字0x39的字符代码。当然，我们必须转义字符串文字中的9，否则它将被字符串文字消耗。

Answer 2

是的，他们使用CSS选择器

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

Syntax
element = document.querySelector(selectors);
where

element is an Element object.
selectors is a string containing one or more CSS selectors separated by commas.

但是，当您将GUID附加为ID时，您可以使用document.getElementById();

它支持这种情况。

以数字开头的HTML ID

2 个答案: