使用反斜杠查询数据属性

Question

我有一个 HTML 数据属性，其值中有一个反斜杠。对该元素的简单查询失败；我必须在查询中使用双反斜杠。

考虑以下测试：

var file = "foo\bar"; // That's a single backslash, to be clear.
document.getElementById('d2').dataset.file = file;

var singleBackslash = '*[data-file="'+file+'"]';
var doubleBackslash = '*[data-file="'+file.replace(/\/g,'\\')+'"]';

var singleCount = document.querySelectorAll(singleBackslash).length;
var doubleCount = document.querySelectorAll(doubleBackslash).length;

var out = document.querySelector('textarea');
out.value  = "There are "+singleCount+" elements matching "+singleBackslash+"\n";
out.value += "There are "+doubleCount+" elements matching "+doubleBackslash;

<div data-file="foo\bar"></div>
<div id="d2"></div>
<textarea cols="60"></textarea>

在 Chrome v48.0.2564.109m on Win7x64 结果是：

There are 0 elements matching *[data-file="foo\bar"]
There are 2 elements matching *[data-file="foo\bar"]

我找不到任何需要此行为的 HTML 规范。所有浏览器都需要双反斜杠吗？什么规范对此进行了描述？

Answer 1

Selectors API Level 1 规范声明 querySelectorAll 接受一个 "selector string"，即：

…a list of one or more group of selectors…

它链接到的 Selectors Level 3 规范说：

Characters in Selectors can be escaped with a backslash according to the same escaping rules as CSS.

最后，它链接到的 CSS2.1 规范描述了反斜杠可用于转义内容的三种方式。

因此，querySelectorAll——与 JavaScript 内的任何用法分开——对反斜杠应用特殊含义。

使用反斜杠查询数据属性

Querying for data attributes with backslashes

javascript

html

custom-data-attribute