CasperJS单击与选择器匹配的所有链接

Question

我已经阅读了这个问题及其答案 ，并希望将其进一步介绍。

我想使用CasperJS.click（selector）函数来单击多个与选择器匹配的链接。 请注意，这些链接没有明显的href标记。

考虑以下标记：

HTML：

<div>
    <h1 class='myLink'>Cocacola</h1>
    <div>
        <div>
            <h1 class='myLink'>Sprite</h1>
        </div>
    </div>
</div>

我在此处最前面提到的答案建议删除链接，以便我们可以单击casper.exists等其余元素。 如果我不想操纵页面怎么办？

由于超出我的构想的原因，请使用：

document.querySelector("div .myLink:nth-of-type(1)");

赶上第一个h1 ，可口可乐。 但：

document.querySelector("div .myLink:nth-of-type(2)");

返回null 。

在这里摆弄 。

有任何想法吗？ 非常感谢！

Answer 1

CSS规范：nth-​​of-type表示：

：nth-​​of-type（an + b）伪类表示法表示元素在文档树中具有+ b-1个兄弟姐妹且具有相同的扩展元素名称的元素，对于n的任何零或正整数值，并且具有父元素。

也就是说，这些元素必须是兄弟姐妹。

例如，

<div>
  <h1 class='myLink'>Cocacola</h1>
  <h1 class='myLink'>Miranda</h1>
  <div>
    <div>
      <h1 class='myLink'>Sprite</h1>
    </div>
  </div>
</div>

选择器div .myLink:nth-of-type(2)将选择Miranda。 也就是说，给定n个“ div .myLink”类型的兄弟姐妹，选择器将从中选择第二个元素。

这是上面示例的小提琴 。

希望这可以帮助！

Answer 2

如前所述，原因:nth-of-type(1)起作用，但:nth-of-type(2)却不起作用是因为每种类型只有一个h1作为其父div的子代。 类选择器.myLink完全是一个单独的条件，并不影响:nth-of-type()工作方式。

即使从技术上讲有两个元素都匹配:nth-of-type(1) ，您的第一条语句似乎仍返回第一个元素的原因是因为querySelector()仅返回第一个match 。

要获取与选择器匹配的第一和第二个元素，请使用querySelectorAll()而不是querySelector() ，以及使用索引器代替:nth-of-type()伪类：

var cocacola = document.querySelectorAll("div .myLink")[0];
var sprite = document.querySelectorAll("div .myLink")[1];