如何/为什么是“* [attribute ^ =”string“”一个有效的querySelector? (JS bug?)

问题描述 投票:15回答:2

所以,这可能是一个错误......我错误地输入了一个CSS路径,以检查已经处理过具有特定onclick函数的元素,从"ajaxLoad("开始

document.querySelectorAll( 'a[onclick^="ajaxLoad("' )

如您所见,我忘了用]关闭属性访问器,如下所示:

document.querySelectorAll( 'a[onclick^="ajaxLoad(]"' )

奇怪的是,它奏效了!

编辑 - 不,我没有,我实际上运行了正确的CSS选择器:

document.querySelectorAll( 'a[onclick^="ajaxLoad("]' )

...但正如评论中所提到的那样,显然这个错字也有效!

这显然是无效的。当我添加另一种类型的tc-link链接时,我发现它,并且想知道我是否可以像在CSS样式表中那样链接它:

document.querySelectorAll( 'a[onclick^="ajaxLoad(", a.tc-link' )

答案是你可以通过关闭那个括号,但不能留下这个错字。

未捕获的DOMException:无法在'Document'上执行'querySelectorAll':'a [onclick ^ =“ajaxLoad(”,tc-link'不是有效的选择器。

它可以在qazxsw poi,qazxsw poi和qazxsw poi上运行,而且我可以看到它在Firefox或Opera中没有发生(我没有任何其他浏览器可以测试)。

我一开始以为这是一个语言怪癖,但是经过修改的问题:任何人都可以找出与Javascript /浏览器代码相关的哪个级别(DOM?V8?呃.. webkit?我不知道这些内容) ,以及它可以报告/修复的地方?

javascript css google-chrome css-selectors
2个回答
7
投票

这主要是基于意见的,并且无法接近确定的答案。

浏览器非常复杂。完成!没有什么是可以预测的。

首先,让我们分析一下错误的选择器列表:

  • ^=(缺少$=
  • *=(缺少a[onclick^="ajaxLoad("
  • ](缺少a[onclick^="ajaxLoad(]"
  • ](缺少a[onclick=""或缺少]a[onclick="][onclick根据你的需要)
  • "](缺少"
  • ](缺少a[onclick=""][onclick
  • ](缺少a[onclick="
  • "](缺少a[onclick
  • ](缺少a:not([onclick]
  • )(缺少a:not([onclick
  • ])(缺少a:not([onclick="
  • "])(缺少a:nth-child(5):not([onclick="

到目前为止,这是找到的列表。我可以确认这些在Windows 7上的Google Chrome 41.0.2272.89m上有效。

注意模式?这很简单:Chrome仍然可以通过填充基本的缺失字符来使用选择器来匹配元素,但仅限于最后!缺少的是如此可预测,它不需要太多的努力来修复。但并非每个选择器都可以“固定”(例如:"]),可以通过添加a:-webkit-any(:not([onclick="来修复)。

这可能是一个错误或一个功能(也就是说,作为一个功能提交的一个令人尴尬的错误),以软化CSS引擎的急切。这也影响jQuery,因为如果"]))不存在或抛出异常,jQuery只使用a,

有一段时间我们可以找到更多。

免责声明:

不应依赖此行为,并且可能在将来发生变化。 这都是基于无效选择器和无效语法(如旧版本的IE CSS Hacks)。上面列表中的所有工作选择器都违反规范。

作为示例给出的'unfixed'选择器(*)在jQuery中工作,但这与此问题无关。从本质上讲,jQuery将执行它作为Sizzle


5
投票

大多数浏览器接受缺少结束括号的原因是它们都遵循document.querySelectorAll()的相同算法。在Chromium bugtracker上讨论了这个问题;这是a,的相关摘录,它将这个bug关闭为WontFix:

解析字符串'a [b = c'时(来自示例链接),CSS解析器将其转换为:

a

方括号块未封闭的事实已经丢失。您可以将此视为解析器“自动关闭所有未关闭的块”。如果您正在使用符合规范的解析器,那么除非您为此目的单独进行单独的临时解析,否则几乎不可能检测到未闭合的块。

(我知道我在这里琢磨了一个老问题,但由于这仍然是CSS specification不时,链接和解释可能是有用的。)

© www.soinside.com 2019 - 2024. All rights reserved.