1. 概述
在 JavaScript 中，我们常常需要找出与特定条件匹配的所有元素，这在前端开发中十分常见。本文将介绍 JavaScript 中几种常见的方法来实现这个目标。
2. 使用querySelectorAll方法
2.1 方法介绍
querySelectorAll() 方法可返回文档中与指定 CSS 选择器匹配的所有元素列表。此方法返回的是 NodeList 对象。
2.2 方法使用
下面是一个例子，找出文档中所有的 <p> 元素：
const pList = document.querySelectorAll("p");
console.log(pList);
在上面的例子中，document.querySelectorAll("p") 会返回所有的 <p> 元素，包含在一个 NodeList 对象中，可以通过 for ... of 进行遍历操作。
2.3 限定条件使用
在上述代码中，我们仅使用了选择器 p 来筛选所有的 <p> 元素。
如果我们希望根据特定条件筛选元素，可以使用能够表达特定条件的选择器。
下面是一个例子，找出所有 <a> 元素的 href 属性值为 "https://www.google.com" 的元素：
const aList = document.querySelectorAll("a[href='https://www.google.com']");
console.log(aList);
3. 使用filter方法
3.1 方法介绍
filter() 方法创建一个新数组，其包含通过所提供函数实现的测试的所有元素。
3.2 方法使用
下面是一个例子，找出文档中所有的 <p> 元素：
const pList = Array.from(document.getElementsByTagName("p")).filter(function(p){
return p.getAttribute("class") == "paragraph";
});
console.log(pList);
在上面的例子中，我们使用 getElementsByTagName() 获取所有的 <p> 元素，之后通过 filter() 方法进行条件筛选，该条件为：只保留那些带有属性 class="paragraph" 的元素。
4. 使用jQuery
4.1 方法介绍
jQuery 是一个广泛应用于 web 开发中的 JavaScript 库。
4.2 方法使用
下面是一个例子，找出文档中所有的 <p> 元素：
const pList = $("p");
console.log(pList);
在上面的例子中，我们使用 $("p") 查询所有的 <p> 元素，之后可以对其进行操作。
如果要根据条件筛选，可以使用 jQuery 的 filter() 方法：
const aList = $("a").filter("[href='https://www.google.com']");
console.log(aList);
5. 结论
本文介绍了 JavaScript 中几种筛选元素的方法，包括使用 querySelectorAll() 方法、使用 filter 方法、以及使用 jQuery 库。
根据实际需要选择不同的方法，可以更加方便快捷地找出我们需要的元素。