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

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]

Represents an element with the att attribute whose value begins with the prefix "val". If "val" is the empty string then the selector does not represent anything.

(强调我的。)

所有子字符串选择器都被设计破坏了:当给定空字符串时，它们什么都不返回(而不是匹配所有字符串)。我不知道为什么，但这就是选择器规范所说的。

最好的解决方法可能是在您的代码中添加一个检查，说明如果 var 为空，请改用 'div[data-mydata]'(即只检查属性的存在，而不是它的值)。