QuerySelectorAll 不适用于 nth-child

问题描述

我有以下 html：

<div class="container">
  <div>Test1
    <div>Test1.1</div>
    <div>Test1.2</div>
    <div>Test1.3</div>
  </div>
  <div>Test2
    <div>Test2.1</div>
    <div>Test2.2</div>
    <div>Test2.3</div>
  </div>
  <div>Test3</div>
  <div>Test4</div>
</div>

我正在尝试使用此方法进行“测试 2”：

var secondChilds = document.querySelectorAll(".container div:nth-child(2)");
console.log(secondChilds[0]);

然而，这让我：

 <div>Test1.2</div>

知道我做错了什么吗？非常感谢。

var secondChilds = document.querySelectorAll(".container div:nth-child(2)");
console.log(secondChilds[0]);

<div class="container">
  <div>Test1
    <div>Test1.1</div>
    <div>Test1.2</div>
    <div>Test1.3</div>
  </div>
  <div>Test2
    <div>Test2.1</div>
    <div>Test2.2</div>
    <div>Test2.3</div>
  </div>
  <div>Test3</div>
  <div>Test4</div>
</div>

解决方法

它实际上是您要查找的索引 1。 .container div:nth-child(1)

const secondChilds = document.querySelectorAll(".container div:nth-child(1)");

console.log(secondChilds[0]);

<div class="container">
  <div>Test1
    <div>Test1.1</div>
    <div>Test1.2</div>
    <div>Test1.3</div>
  </div>
  <div>Test2
    <div>Test2.1</div>
    <div>Test2.2</div>
    <div>Test2.3</div>
  </div>
  <div>Test3</div>
  <div>Test4</div>
</div>

querySelectorAll() 返回 3 个 div。 Test1.2 是 Test1 div 的第二个孩子。 Test2 是 .container div 的第二个孩子。而 Test2.2 是 Test2 div 的第二个孩子。

因为它按照它们在 DOM 中出现的顺序返回它们，所以您想要的是 secondChilds[1]，而不是 secondChilds[0]。

如果您只想考虑 .container 的直接子级，而不是嵌套子级，请使用 >。

var secondChilds = document.querySelectorAll(".container > div:nth-child(2)");
console.log(secondChilds[0].innerText);

<div class="container">
  <div>Test1
    <div>Test1.1</div>
    <div>Test1.2</div>
    <div>Test1.3</div>
  </div>
  <div>Test2
    <div>Test2.1</div>
    <div>Test2.2</div>
    <div>Test2.3</div>
  </div>
  <div>Test3</div>
  <div>Test4</div>
</div>

目前您的查询“.container div:nth-child(2)”选择任何类型的 div（包括嵌套的）并返回第二个 div（即测试 1.2）。您只想要 .container div 的直接子级，因此您可以使用 > 选择父级的直接子级。

所以你的查询应该是 .container > div:nth-child(2)

var secondChilds = document.querySelectorAll(".container > div:nth-child(2)");
console.log(secondChilds[0]);

<div class="container">
  <div>Test1
    <div>Test1.1</div>
    <div>Test1.2</div>
    <div>Test1.3</div>
  </div>
  <div>Test2
    <div>Test2.1</div>
    <div>Test2.2</div>
    <div>Test2.3</div>
  </div>
  <div>Test3</div>
  <div>Test4</div>
</div>

javascript selectors-api