javascript - 如何组合css选择器

Question

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

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

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

Answer 1

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

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

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

[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？ - 以避免混淆。)