如何/为什么是“* [attribute ^ =”string“ “一个有效的querySelector？ （JS错误？） [英] How/why is “ *[attribute^="string" ” a valid querySelector? (JS bug?)

问题描述

所以，这可能是一个错误...我错了一个CSS路径检查已经处理过的特定的onclick函数开始ajaxLoad（

  document.querySelectorAll（'a [onclick ^ =ajaxLoad（''）
  

正如你所看到的，我忘了关闭属性访问器，用] ：

  document.querySelectorAll（'a [onclick ^ =ajaxLoad（]'）
  

很奇怪，它工作了！

Edit - 没有，我实际上运行了正确的CSS选择器：

  document.querySelectorAll a [onclick ^ =ajaxLoad（]'）
  

...显然这个进一步的错字也有效！

这显然是无效的，当我来添加另一种类型的链接 tc-link ，想知道我是否可以像CSS样式表中链接：

 document.querySelectorAll（'a [onclick ^ =ajaxLoad（，a.tc-link'）

答案是你可以关闭那个括号

未捕获DOMException：无法对'querySelectorAll'执行'文件'：'a [onclick ^ =ajaxLoad（，tc-link'不是有效的选择器。

^ = ， $ = 和 * = 并且从我可以看到不会发生在Firefox或Opera（我没有任何其他浏览器测试）。

我认为这是一个语言怪癖，但修订的问题：任何人可以工作在哪个级别（DOM？ V8？ Er .. webkit？

解决方案

浏览器是极其复杂的。完成！

首先，让我们分析一个错误的选择器列表：

• a [onclick ^ =ajaxLoad（（缺少] ）


• a [onclick ^ =ajaxLoad（]（缺少] ）


• a [onclick =（缺少] ）


• a [onclick =] [onclick （缺少] 或缺少 code>和] ）


• a [onclick = [onclick （missing ] ）


• a [onclick =（缺少] ）


• a [onclick （缺少] ）


• a：not（[onclick] ））


• a：not（[onclick $ c>]））


• a：not（[onclick = $ c>]））


• a：nth-​​child（5）：not（[onclick =（缺少]））


• a：-webkit-any onclick =（缺少））））

到目前为止，这是找到的列表。

我可以确认这些工作在Windows 7上的Google Chrome 41.0.2272.89m上。

注意模式？

很简单：Chrome仍然可以使用选择器来填充基本的缺少字符，但只有可以匹配元素！

缺少的是如此可预测的，它不需要太多的努力来解决。

但不是每个选择器都可以/将是'fixed'（例如： a，，可以通过添加 * 修复。）

这可能是一个错误或功能（aka，embarassing bug提交为功能）软化CSS引擎的热情。

这也影响jQuery，因为jQuery只使用 Sizzle 如果 document.querySelectorAll（）不存在或引发异常。

b
$ b

此行为不应依赖，可能会在未来更改。

这是基于无效选择器和无效语法（如旧版本的某些IE CSS Hacks）。

ALL 上面列表中的工作选择器违反规范

以 作为示例（ a，在jQuery中，但是与这个问题无关。

本质上，jQuery将执行 a 。

So, this might be a bug... I mistyped a CSS path to check for elements that had been processed to have a particular onclick function beginning "ajaxLoad("

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

As you can see, I forgot to close the attribute accessor, with ], like so :

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

Weirdly, it worked!

Edit - no I didn't, I actually ran the correct CSS selector:

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

... but as mentioned in the comments apparently this further typo also works!

This is obviously invalid. I spotted it when I came to add another type of link, of class tc-link, and was wondering if I could just chain it like in CSS stylesheets as :

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

The answer is that you can by closing that bracket, but not when this typo is left in.

Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Document': 'a[onclick^="ajaxLoad(", a tc-link' is not a valid selector.

It works on ^=, $=, and *=, and from what I can see doesn't happen in Firefox or Opera (and I don't have any other browsers to test in).

I was thinking this was a language quirk at first but revised question: can anyone work out which level (DOM? V8? Er.. webkit? I don't know the ins and outs that well) of Javascript/browser code this relates to, and where it can get reported/fixed?

解决方案

This is primarly opinion based and is nowhere close to a definitive answer.

Browsers are EXTREMELY complex. Done! Nothing is predictible on them.

First, let's analize a list of faulty selectors:

• a[onclick^="ajaxLoad(" (missing ])
• a[onclick^="ajaxLoad(]" (missing ])
• a[onclick="" (missing ])
• a[onclick="][onclick (missing "] or missing " and ] based on what you need)
• a[onclick=""][onclick (missing ])
• a[onclick=" (missing "])
• a[onclick (missing ])
• a:not([onclick] (missing ))
• a:not([onclick (missing ]))
• a:not([onclick=" (missing "]))
• a:nth-child(5):not([onclick=" (missing "]))
• a:-webkit-any(:not([onclick=" (missing "])))

So far, this is the list found.
I can confirm that these work on Google Chrome 41.0.2272.89m on Windows 7.

Notice the pattern?
It's simple: Chrome still can use there selectors to match the elements by filling with basic missing characters, but only at the end!
What is missing is so predictible it doesn't require too much effort to fix.
But not every selector can/will be 'fixed' (E.g.: a,, can be fixed by adding *).

This may be a bug or a feature (aka, embarassing bug submited as feature) to soften the eagerness of the CSS engine.
This also affects jQuery since jQuery only uses Sizzle if document.querySelectorAll() doesn't exist or throws an exception.

With some time we can find many more.

---

Disclaimer:

This behaviour shouldn't be relied upon and may change in the future.
This is all based on invalid selectors and invalid syntax (like some IE CSS Hacks for older versions).
ALL the working selectors on the list above are against the spec.

The 'unfixed' selector given as an example (a,) works in jQuery, but that is unrelated to this question.
Essentially, jQuery will execute it as a.

这篇关于如何/为什么是“* [attribute ^ =”string“ “一个有效的querySelector？ （JS错误？）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！