为什么这个表达式在 querySelectorAll 中是非法的答案

【问题标题】：Why is this expression illegal in querySelectorAll为什么这个表达式在 querySelectorAll 中是非法的
【发布时间】：2013-07-31 05:26:48
【问题描述】：

为什么将 el.querySelectorAll 与以“>”开头的选择器一起使用是非法的？什么是简单的替代解决方案？

var el = document.createElement('div');

el.querySelector('> div');

上面的这段代码会产生一个 DOM Exception 12。解决方案必须避免使用 jquery，它确实支持这一点而不会出错。可以提供 Zepto 解决方案，因为 Zepto 不支持。

When the selector does not start with '>' it is valid:

el.querySelectorAll('div > div');

【问题讨论】：

使用.children或.childNodes
您要求的是左侧选择器的直系后代，因此 "x > y" 有意义，而 "> y" 则没有。
@lossleader 关键是 OP 很困惑，因为 jQuery 确实支持这个选择器，因为它不仅仅是将它传递给 querySelector - 它解析它并确定它需要采取的工作路径
他已经指定他不想使用 jquery.. 所以他最好学习有效的 css。 jquery 文档本身解释了什么是扩展。
@lossleader 当然可以 - Solution must avoid using jquery, which does support this without error.

【解决方案1】：

不知何故，我觉得 OP 只是在寻找

el.querySelector('body > div');

【讨论】：

【解决方案2】：

作为使用 Zepto 的解决方案：

$(el.childNodes).find('div')

如果您只想要所有直接后代节点而不是“div”后代，那么这种方法可能无济于事，因为使用 .find('*') 提供的不仅仅是直接后代。

如另一个答案中所述，使用“>”的选择器需要在其前面有一个选择器表达式，在其后有一个选择器表达式（即“div > div”）。

【讨论】：

【解决方案3】：

document.querySelectorAll 需要一个包含一个或多个用逗号分隔的 CSS 选择器的字符串。

'> div' 不是有效的 CSS 选择器。

> 是一个子组合子。子组合子描述了两个元素之间的童年关系。

'> div' 只有一个元素。 ' div >' 也不行。

更多信息见

【讨论】：

【解决方案4】：

element = baseElement.querySelector(selectors)

selectors 需要遵循标准的 css 语法。所以，即使querySelector 是一个元素的方法，selectors 参数必须形成一个有效的css-selector；也就是说，您可以在样式表中使用。

【讨论】：