使用querySelectorAll选取多个列表 - Javascript

在Javascript中，我们可以使用querySelectorAll()函数来选取网页上的多个列表。这个函数可以把匹配指定CSS选择器的所有元素放入一个NodeList中返回给我们。

语法

document.querySelectorAll(selectors)

• selectors：要匹配的CSS选择器。这可以是一个单独的选择器或多个选择器，用逗号分隔。例如，要选取两个class为list-group-item的元素，可以使用 ".list-group-item, .list-group-item"。

示例

<ul class="list-group">
  <li class="list-group-item">Item 1</li>
  <li class="list-group-item">Item 2</li>
  <li class="list-group-item">Item 3</li>
</ul>

<ol class="list-group">
  <li class="list-group-item">Item A</li>
  <li class="list-group-item">Item B</li>
  <li class="list-group-item">Item C</li>
</ol>

上面的代码包含两个列表，一个无序列表和一个有序列表，它们的class都为list-group。为了选取这两个列表的所有项，我们可以使用以下Javascript代码：

var items = document.querySelectorAll('.list-group li');

在这个例子中，我们选取了所有class为list-group的列表中的所有li元素。

返回值

querySelectorAll()函数返回一个NodeList对象。NodeList是一个类数组对象，它包含了与指定选择器匹配的元素。您可以通过下标来访问它们，也可以使用forEach()函数遍历它们。

var items = document.querySelectorAll('.list-group li');

items.forEach(function(item) {
  // Do something with the item
});

结论

通过querySelectorAll()函数，我们可以轻松选取多个列表，并在Javascript中对它们进行操作。它可以帮助您快速，轻松地编写强大的代码，而不必让代码变得冗长和难读。