QuerySelectorAll 使用类和索引号

问题描述

document.querySelectorAll('.fixers > track > tnty')

在 DOM 上有许多名为 fixers 的类，有没有办法包含使用什么类号的方法

document.querySelectorAll('.fixers[2] > track > tnty')

目前我这样做

document.getElementsByClassName('fixers')[2].querySelectorAll('track > tnty')

有没有更正确的方法？

谢谢

解决方法

您可以使用 nth-child() 伪类来选择第二组，如下所示：

const elems = document.querySelectorAll('.fixers:nth-child(2) > .track > .tnty');
console.log(elems);
console.log(elems[0].textContent);

<div class="fixers">
  <div class="track">
    <div class="tnty">1</div>
  </div>
</div>

<div class="fixers"> <!-- 2 -->
  <div class="track">
    <div class="tnty">2</div>
  </div>
</div>

<div class="fixers">
  <div class="track">
    <div class="tnty">3</div>
  </div>
</div>

,

您可以使用特定的父元素获取选定的“fixers”元素

document.querySelectorAll('.special-parent .fixers > track > tnty')

或 :nth-child() 选择器

document.querySelectorAll('.fixers:nth-child(2) > track > tnty')

或同时使用上述两者。