raj*_*aju 3 javascript css css-selectors selectors-api selenium-webdriver
我使用webdriver并经常使用css选择器,并想知道我写入遍历每个级别的代码量是否可以减少.以下是访问元素的javascript代码,java中的类似代码将出现在我的代码中.
在下面的例子中,我使用了3个css选择器来遍历3个级别,我可以将它们组合在一起或至少简化.
document.querySelector('.datagrid').querySelectorAll(".even")[3].querySelectorAll('tbody tr')
您可以使用后代或子选择器(技术上称为"组合器")来组合第一部分:
document.querySelectorAll('.datagrid .even')[3].querySelectorAll('tbody tr')
...但它会使浏览器比你的代码更难工作,因为你的代码(document.querySelector('.datagrid'))的第一部分会在找到第一个匹配元素时停止查找,然后.even只在其中查找元素.以上查找具有祖先的所有 .even元素.datagrid.因此可能需要搜索更多文档.大多数时候没关系,但值得指出.以上还假设.even第一个中至少有四个元素.datagrid.如果没有,你的代码将抛出一个错误(因为尝试调用.querySelectorAll上[3],这将是null),而上面的代码可能会抛出一个错误(如果有不是四个总在页面上),或者可能.even在后续.datagrid而不是第一个中引用一个元素.
将[3]使得它棘手的结合起来,与后面的一个.这很容易使用.even:nth-child(3)或者.even:nth-of-type(3),但这是一个错误,因为这些计数都不匹配.even,然后取第三个.nth-child只匹配的元素都 .even 与他们的父母的第三个孩子元素(考虑所有元素,而不仅仅是.even那些).nth-of-type做同样的事情,但只考虑具有相同标签的其他元素.如果您有其他.even具有相同标记名称的非元素,则会出错.
有时你会听到关于添加一个选择器(类似于:eqjQuery提供的)来做你正在谈论的事情,但问题(据我所知)是需要对选择器引擎处理选择器的方式进行根本改变(这是右到左).(还有一个问题是jQuery被广泛使用,并且0用作第一个元素的索引,而CSS 1在类似的情况下使用.所以CSS必须使用除了:eq - 或许:index？ - 之外的其他东西以避免混淆.)