css选择器处理数字开头的 ID 报错 SyntaxError: DOM Exception 12如何解决

文
章
目
录

• 示例代码展示
• 问题具体呈现
• 多种解决方案介绍

在 HTML5 的规范里，以数字作为元素的 ID 是被允许的。不过在实际开发场景中，这一做法很可能会引发一些预想不到的状况。

示例代码展示

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

在上述代码里，虽然利用 getElementById 能够顺利访问这些带有数字 ID 的元素，但是倘若使用 querySelector 去选择它们，就会遭遇 SyntaxError: DOM Exception 12 错误。这背后的原因在于，尽管数字 ID 在 HTML5 中有效，然而在 CSS 里却是无效的，而 querySelector 恰恰是基于 CSS 选择器机制来运作的。

问题具体呈现

当执行如下代码时，问题便会显现：

document.querySelector(\'#1\')

这是由于 CSS 选择器并不支持以数字开头的 ID 选择器。

多种解决方案介绍

1）使用有意义的 ID

建议尽量避免使用单纯的数字作为 ID，取而代之的是使用像 message1 或 item2 这类更具语义化的命名方式。如此一来，大部分因数字 ID 引发的问题都能得到有效规避。这不仅有利于代码的可读性，还能提高代码的可维护性。

2）使用 getElementById

最为直接的解决办法就是运用 getElementById 方法。它是专门针对通过 ID 获取 DOM 元素而设计的，能够毫无阻碍地处理数字 ID。

document.getElementById(\'1\')

此方法简单且高效，无需进行任何转义操作或者额外的处理步骤。

3）使用 CSS 转义

要是非得使用数字 ID，那么可以借助 CSS 转义来化解这个难题。例如，字符 1 的 Unicode 代码点是 U+0031，转义方式如下：

#31 {
background: hotpink;
}

在 JavaScript 中使用时：

document.querySelector(\'#\')

4）使用属性选择器

另一种可行的方式是借助属性选择器，从而避开直接使用 ID 选择器：

document.querySelector(\"[id=\'1\']\")

这种方式虽然能够达成目的，但是相对而言代码会显得有些繁琐。

5）使用 CSS.escape

对于动态生成的 ID，可以利用 CSS.escape 方法来自动处理转义问题：

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

这种方式能够让代码更加简洁清晰，并且自动完成转义处理。

6）自定义函数

如果项目需要兼容旧浏览器，那么可以自定义一个函数来处理转义：

const cleanSelector = function (selector) {
;(selector.match(/(#[0-9][^\\s:,]*)/g) || []).forEach(function (n) {
selector = selector.replace(n, \'[id=\"\' + n.replace(\'#\', \'\') + \'\"]\')
})
return selector
}
const myselector =
\'.dog #980sada_as div span#aside:hover div.apple#05crab:nth-of-type(2),.ginger #2_green_div, div.cupcake #darwin p#23434-346365-53453\'

const clean_myselector = cleanSelector(myselector)
const elems = document.querySelectorAll(clean_myselector)

该函数能够自动将数字 ID 转换为属性选择器的形式，适用于那些不支持 `CSS.escape` 的旧浏览器。

通过以上多种方式，开发者可以根据项目的具体需求和场景，灵活选择合适的方法来处理以数字开头的 ID 在 `querySelector` 中的问题 。这样能保证代码在不同情况下都能稳定、高效地运行。