3

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

在下面的示例中，我使用 3 个 css 选择器来遍历 3 个级别，我可以将它们组合在一起还是至少简化。

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

2 回答 2

7

您可以使用后代或子选择器（技术上的“组合器”）来组合第一部分：

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

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

这[3]使得将其与后面的结合起来很棘手。.even:nth-child(3)使用or很诱人.even:nth-of-type(3)，但那将是一个错误，因为这两个计数都不匹配.even，然后取第三个。nth-child仅匹配既是其父元素 .even 又是其父元素的第三个子元素的元素（考虑所有元素，而不仅仅是.even一个）。nth-of-type做同样的事情，但只考虑具有相同标签的其他元素。如果您有其他非.even元素具有相同的标签名称，那将是错误的。

有时你听到谈论添加一个选择器（类似于:eqjQuery 提供的）来做你正在谈论的事情，但问题（据我了解）是它需要从根本上改变选择器引擎处理选择器的方式（即右到左）。（还有一个问题是 jQuery 被广泛使用，并0用作第一个元素的索引，而 CSS1在类似情况下使用。所以 CSS 必须使用其他东西:eq ——也许:index？——以避免混淆。）

于 2013-06-28T13:09:56.140 回答
0

几乎所有你可以用 css 选择器做的事情querySelector()，所以如果你知道你的 css 选择器，你应该没问题。

“传递给 querySelector 的字符串参数必须遵循 CSS 语法”——从 API 中提取。

于 2013-06-28T13:17:48.057 回答