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

时间:2013-07-30 21:22:50

标签: javascript css css3 css-selectors selectors-api

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

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

el.querySelector('> div');

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

当选择器未以'>'开头时这是有效的:

el.querySelectorAll('div > div');

4 个答案:

答案 0 :(得分:6)

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

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

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

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

有关详细信息,请参阅

答案 1 :(得分:0)

element = baseElement.querySelector(selectors)

selectors需要遵循标准的css语法。因此,即使querySelector是元素的方法,selectors参数也必须形成有效的css选择器;也就是说,你可以在样式表中使用它。

MDN reference

答案 2 :(得分:0)

不知怎的,我有一种感觉,OP只是在寻找

el.querySelector('body > div');

答案 3 :(得分:-1)

作为使用Zepto的解决方案:

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

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

如其他答案中所述,使用'>'的选择器需要在它之前有一个选择器表达式,并在它之后有一个(即'div> div')。