在 Javascript 中具有指定索引的 QuerySelector（如 [1]）

Question

如何制作：

document.getElementsByClassName("first")[1].getElementsByClassName("second")[2];

但使用 querySelector?

我的猜测是：

document.querySelector(".first[1] > .second[2]");

但这不起作用。

Answer 1

document.querySelector(".first:nth-of-type(2) .second:nth-of-type(3)").style.color = "red"

<div class="first">
  <div class="second">second1</div>
  <div class="second">second2</div>
  <div class="second">second3</div>
  <div class="second">second4</div>
</div>
<div class="first">
  <div class="second">second1</div>
  <div class="second">second2</div>
  <div class="second">second3</div>
  <div class="second">second4</div>
</div>

Answer 2

在您最初的选择中，您使用 .first 的 class 获取第二个元素，使用 .second 的 class 获取第三个元素，这也是child 的前者。考虑到这一点，您可以对两个 classes 使用 nth-of-type 伪选择器并相应地进行计数。与您现在拥有的 JS 相比，此方法的唯一区别是它不使用 zero-index.

// document.getElementsByClassName("first")[1].getElementsByClassName("second")[2];

document.querySelector('.first:nth-of-type(2) .second:nth-of-type(3)').style = 'border: 1px solid red;'

.first {
  border: 1px solid black;
  padding: 10px;
}

.first:nth-of-type(2) {
  margin-top: 10px;
}

<div class="first">
  <div class="second">Second (1)</div>
  <div class="second">Second (2)</div>
  <div class="second">Second (3)</div>
</div>

<div class="first">
  <div class="second">Second (1)</div>
  <div class="second">Second (2)</div>
  <div class="second">Second (3)</div>
</div>

Answer 3

您不需要 querySelector 的 > 运算符，您可以使用以下语法：

document.querySelector('.first:nth-child(1) .second:nth-child(2)');

在此 HTML 代码中：

var test = document.querySelector('.first:nth-child(1) .second:nth-child(2)').innerText;
console.log(test);

<div class="first">

  <div class="second"></div>
  <div class="second">Hello, I'm your selected div!</div>
  <div class="second"></div>

</div>

<div class="first">
</div>

JS 代码将产生输出：

Hello, I'm your selected div!

请记住 CSS 伪选择器 从 1 开始计数，而不是从 0 开始，因此要实现您发布的示例，您需要设置 :nth-child(2) 和 :nth-child(3).

此外，如果您有不同的结构，不妨看看 :nth-of-type 选择器，因为 :nth-child 需要成为父项的第 n 个子项，在绝对意义上。不同的是，:nth-of-type 将查找父项的第 n 个（typeof）子项。

在 Javascript 中具有指定索引的 QuerySelector（如 [1]）

QuerySelector with specified index in Javascript (like [1])

javascript

queryselector