带有ID的#select选择器':'

时间:2017-05-23 17:29:57

标签: html dom

我读到了这个角色' :'是id属性中的有效字符。 我指定了一个包含' :'的ID。例如id="n:1"

然而,当使用document.querySelector("#n:1")时,会引发DOM异常(在Chrome中)。

有没有办法解决这个问题?

2 个答案:

答案 0 :(得分:1)

你需要用两个反斜杠来逃避冒号:

document.querySelector("#n\\:1")

MDN

  

匹配不遵循CSS语法的ID或选择器(通过使用   例如,冒号或空间不恰当),你必须逃避   带斜杠的字符。因为反斜杠是一个转义字符   在JavaScript中,如果要输入文字字符串,则必须转义   它两次(一次用于JavaScript字符串,另一次用于   querySelector)

答案 1 :(得分:1)

确实,the HTML5.1 specification states

  

3.2.5.1 id属性

     

ID可以采取什么形式没有其他限制;特别是,ID可以只包含数字,以数字开头,以下划线开头,仅包含标点符号等。

所以你需要在选择器序列中转义字符,我假设你使用CSS'规则来转义字符,但它们很复杂:

https://mathiasbynens.be/notes/css-escapes

简而言之,如果您不需要支持IE8或更早版本,请使用反斜杠 - 但您还需要在JavaScript中转义反斜杠(因此CSS选择器解析器会看到反斜杠),所以你需要双重逃脱它们。

所以试试这个:

querySelectorAll('#n\\:1')