如何在 JS 中的查询选择器中给出索引

JavaScript 提供了多种方法用于查询 HTML 页面中的元素，其中最常用的是查询选择器。有时候我们需要查询到一组元素中的某个特定元素，这个时候索引就派上用场了。本文将介绍如何在 JS 中的查询选择器中给出索引。

通过索引获取元素

假设我们有一个 HTML 页面，其中有一组元素：

<ul id="list">
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
  <li>Durian</li>
</ul>

如果我们想获取这组元素中的第二个元素（即 "Banana"），可以使用以下 JavaScript 代码：

var secondElement = document.querySelector('#list li:nth-child(2)');
console.log(secondElement.innerText); // 输出 "Banana"

上述代码中，document.querySelector 方法接受一个 CSS 选择器作为参数。:nth-child(2) 表示选择第二个子元素，从而获取到 "Banana" 元素。

遍历获取元素

如果我们需要获取整个元素组中的某个元素，可以使用 querySelectorAll 方法：

var allElements = document.querySelectorAll('#list li');
var thirdElement = allElements[2];
console.log(thirdElement.innerText); // 输出 "Cherry"

上述代码中，document.querySelectorAll 方法同样接受一个 CSS 选择器作为参数。它将返回一个 NodeList 对象，其中包含了与查询选择器匹配的所有元素。我们可以使用索引来访问特定的元素，从而获取到 "Cherry" 元素。

小结

本文介绍了如何在 JavaScript 中的查询选择器中给出索引，以便获取特定的 HTML 元素。我们可以通过 :nth-child 选择器和 querySelector 方法来获取一组元素中的某个特定元素；也可以通过 querySelectorAll 方法和索引来获取整组元素中的某个元素。