使用ID为数字的querySelector

Question

根据我的理解，HTML5规范允许您使用像这样的数字的ID。

<div id="1"></div>
<div id="2"></div>

我可以使用getElementById访问这些内容，但不能使用querySelector。如果我尝试执行以下操作，我会在控制台中获得 SyntaxError：DOM Exception 12 。

document.querySelector("#1")

我很好奇为什么当HTML5规范说明这些ID有效时，使用数字作为ID无效querySelector。我试过多个浏览器。

Answer 1

这是有效的，但需要一些特殊处理。从这里开始：http://mathiasbynens.be/notes/css-escapes

  

前导数字

     

如果标识符的第一个字符是数字，则需要根据其Unicode代码点对其进行转义。例如，字符1的代码点是U + 0031，因此您可以将其转义为\ 000031或\ 31。

     

基本上，要转义任何数字字符，只需在其前面添加\ 3并附加空格字符（）。是的Unicode！

所以你的代码最终会成为（CSS first，JS second）：

#\31  {
    background: hotpink;
}

document.getElementById('1');
document.querySelector('#\\31 ');

Answer 2

因为虽然它们在HTML5规范中有效，但它们在CSS中无效，这就是“查询选择器”的含义。

相反，您必须执行此操作：document.querySelector("[id='1']")，考虑到您可以为其提供有意义的 ID，如message1或其他内容，这是非常啰嗦的;）< / p>

Answer 3

我需要一种自动化的方法。最近的更改意味着所使用的id值不再是简单的字母字符，而是包含数字和特殊字符。

我最终使用了CSS.escape：Sample ROC plot output by plotROC

console.log(CSS.escape('1'));

首先，这是失败的情况：

const theId = "1";
document.querySelector(`#${theId}`);
const el = document.querySelector(`#${theId}`);
el.innerHTML = "After";

<div id="1">Before</div>

现在使用CSS.escape：

const theId = "1";
const el = document.querySelector(`#${CSS.escape(theId)}`);
el.innerHTML = "After";

<div id="1">Before</div>

看看它如何正确更改以显示After，证明选择器有效！

Answer 4

这是我刚才制作的用于处理CSS选择器中的前导数字ID的功能，它是IE安全的，因为CSS是安全的。

在使用选择器之前，先使其通过cleancleanor函数：

if value < 30: value = 30

Answer 5

从W3C文档Attribute selectors syntax

  

属性值必须是有效的CSS标识符或字符串。

因此，带有前导数字的数字或字母数字字符串不属于有效标识符。

如果使用ID生成器实用程序生成标识符，则可能会以带有前导数字的字母数字ID结尾。

一种快速的解决方法是要么忽略生成器的SEED中的数字（如果可以修改），要么总是将字符串附加到生成的ID上。