javascript – 如何组合css选择器

我使用webdriver并经常使用css选择器,并想知道我写入遍历每个级别的代码量是否可以减少.以下是访问元素的 javascript代码,java中的类似代码将出现在我的代码中.

在下面的例子中,我使用了3个css选择器来遍历3个级别,我可以将它们组合在一起或至少简化.

document.querySelector('.datagrid').querySelectorAll(".even")[3].querySelectorAll('tbody tr')

解决方法

您可以使用 descendant或 child选择器(技术上称为“组合器”)来组合第一部分：

document.querySelectorAll('.datagrid .even')[3].querySelectorAll('tbody tr')

…但它会使浏览器比你的代码更难工作,因为代码的第一部分(document.querySelector(‘.datagrid’))会在找到第一个匹配元素时停止查看,然后再看仅限于.even元素.上面查找了具有.datagrid祖先的所有.even元素.因此可能需要搜索更多文档.大多数时候没关系,但值得指出.以上还假设第一个.datagrid中至少有四个.even元素.如果没有,你的代码会抛出一个错误(因为尝试在[3]上调用.querySelectorAll,这将是null),而上面的代码可能会抛出一个错误(如果总共没有四个)页面),或者可能引用后续.datagrid中的.even元素而不是第一个.

[3]将它与后面的结合起来很棘手.使用.even：nth-​​child(3)或.even：nth-​​of-type(3)是很诱人的,但这是一个错误,因为这些计数都不匹配.even然后取第三个. nth-child只匹配.even和父母的第三个子元素的元素(考虑所有元素,而不仅仅是.even). nth-of-type做同样的事情,但只考虑具有相同标签的其他元素.如果你有其他非.even元素具有相同的标记名称,那将是错误的.

有时你会听到有关添加选择器(类似于jQuery提供的eq)的讨论来做你正在谈论的事情,但问题(据我所知)是需要对选择器引擎处理选择器的方式进行根本改变(这是从右到左). (还有一个问题是jQuery被广泛使用,并使用0作为第一个元素的索引,而CSS在类似的情况下使用1.因此CSS必须使用除了以下之外的东西：eq – 也许：index？ – 以避免混淆. )