Question

任何人都可以解释为什么以下内容返回空列表：

var el = document.createElement('div');
el.dataset.mydata="hello";
document.body.appendChild(el);
document.querySelectorAll('div[data-mydata^=""]');

（如果您想知道为什么这样做，那么实际的代码正在使用变量作为querySelector中的属性值。该函数的一部分被递归调用，在第一次运行时，该变量为空）

Answer 1

发生这种情况是因为substring matching attribute selectors are dumb：

[att^=val]

代表具有att属性的元素，其值以前缀“ val”开头。 如果“ val”为空字符串，则选择器不代表任何内容。

（强调我的。）

所有子字符串选择器都被设计破坏：给定空字符串时，它们不返回任何内容（而不是匹配所有字符串）。我不知道为什么，但这就是选择器规范所说的。

最好的解决方法可能是在代码中添加一个检查，指出如果var为空，请改用'div[data-mydata]' （即仅检查属性是否存在），而不是其值）。

Answer 2

您应实现以下条件：如果值为空，则在选择器中使用=运算符；如果值不为空，则使用^=运算符。

尝试运行以下代码段

var el = document.createElement('div');
var value = "";
el.dataset.mydata = value;
document.body.appendChild(el);
var elements = document.querySelectorAll(`div[data-mydata${value ? "^": ""}=""]`);
console.log(elements.length);

查询选择器属性值以空字符串开头失败

2 个答案: